MVC. Net Ядро 3.1 Список объектов, отправленных по нулевому значению через Vue .js / Ax ios. js

Question

Мне нужна помощь. По какой-то причине список процентных ставок становится недействительным для контроллера. Любые идеи о том, как я могу это исправить? Если я удалю коллекцию процентных ставок из списка параметров в сообщении ax ios, все будет работать нормально. Вот код, который у меня есть.

Вот мой метод контроллера

       public ActionResult Create([FromBody]CreditCardModel data)
       {
           try
           {

               return RedirectToAction(nameof(Index));
           }
           catch
           {
               return View();
           }
       }

Вот мой HTML

@{
    ViewData["Title"] = "Add Credit Card";
}
<h1>
    Add Credit Card
</h1>
<div id="app">
    <!--Vue App Start-->
    <label>Credit Card Vendor Name:</label>
    <br />
    <input v-model="CardVendor" placeholder="[Enter Credit Card Vendor Name]" size="50">
    <br /><br />

    <label>Credit Card Nick Name:</label>
    <br />
    <input v-model="CardNickname" placeholder="[Enter Credit Card Nickname]" size="50">
    <br /><br />

    <label>Credit Card Type:</label>
    <br />
    <select v-model="CardType">
        <option value="1">Visa</option>
        <option value="2">Mastercard</option>
        <option value="3">Discover</option>
        <option value="4">American Express</option>
        <option value="5">Other</option>
    </select>

    <br /><br />

    <label>Credit Card Credit Limit:</label>
    <br />
    <input v-model="CardLimit" placeholder="[Enter Credit Card Limit]" size="50">
    <br /><br />

    <label>Credit Card Credit Balance:</label>
    <br />
    <input v-model="CardBalance" placeholder="[Enter Credit Card Balance]" size="50">
    <br /><br />

    <label>Add Interest Rate(s):</label>
    <table border="1">
        <thead>
            <tr>
                <th>Interest Rate %</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in InterestRates">
                <td><input type="text" v-model="item.InterestRate"></td>
                <td><input type="text" v-model="item.StartDate"></td>
                <td><input type="text" v-model="item.EndDate"></td>
                <td><button type="button" v-on:click="removeInterestRate(item)">Remove</button>
            </tr>
        </tbody>
    </table>

    <button v-on:click="addInterestRate">Add Interest</button>

    <br />
    <br />

    <button v-on:click="addCard">Add Card</button>

    <br />
    <br />
    <font color="gray">CardVendor-debug: {{ CardVendor }}</font><br />
    <font color="gray">CardNickname-debug: {{ CardNickname }}</font><br />
    <font color="gray">Cardtype-debug: {{ CardType }}</font><br />
    <font color="gray">CardLimit-debug: {{ CardLimit }}</font><br />
    <font color="gray">CardBalance-debug: {{ CardBalance }}</font><br />

    <!--Vue App End-->
</div>

@section Scripts{
    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/axios/axios.js"></script>
    <script src="~/js/addcreditcard.js"></script>
}

Вот мое Vue. JS приложение

var app = new Vue({
    el: '#app',
    data: {
        CardVendor: '',
        CardNickname: '',
        CardType: '',
        CardLimit: '',
        CardBalance: '',
        InterestRates: [
            {
                InterestRate: '0.30',
                StartDate: '1/1/2020',
                EndDate: '6/30/2020'
            },
            {
                InterestRate: '0.60',
                StartDate: '7/1/2020',
                EndDate: '12/31/2020'
            }
        ]
    },
    methods: {
        addInterestRate: function (event) {                   
            this.InterestRates.push({});
        },
        removeInterestRate: function (event) {            
            this.InterestRates.pop({});
        },    
        addCard: function (event) {
            //alert(JSON.parse(JSON.stringify(app.$data)));
            //Try this tonight: https://www.linkedin.com/pulse/post-data-from-vuejs-aspnet-core-using-axios-adeyinka-oluwaseun
            axios({
                method: 'post',
                url: '/CreditCard/Create',
                data: {
                    "CardVendor": this.CardVendor,
                    "CardNickname": this.CardNickname,
                    "CardType": this.CardType,
                    "CardLimit": this.CardLimit,
                    "CardBalance": this.CardBalance,
                    "InterestRates": this.InterestRates
                },
                headers: { 'Content-Type': 'application/json' }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });

        }    

    }
})

Вот моя модель

using DebtRefresh.WebUI.Interfaces;
using System;
using System.Collections.Generic;

namespace DebtRefresh.WebUI.Models
{
    public class CreditCardModel
    {   
        public CreditCardModel()
        {
            InterestRates = new List<IInterestRateModel>();
        }

        public string CardVendor { get; set; }        
        public string CardNickname { get; set; }
        public string CardType { get; set; }
        public string CardLimit { get; set; }
        public string CardBalance { get; set; }
        public List<IInterestRateModel> InterestRates { get; set; }
    }
}