ASP.NET使用AJAX完成前后端表单数据交互（包含Vue绑定下拉选项）

"Information">
    
"SearchBarDiv" v-cloak>
        

            select id="YearSelect" class="form-control" v-model="yearVal" v-on:change="YearValChange">
                for="item in yearOption" :value="item.Value">{{item.Title}}
select>
            select id="MonthSelect" class="form-control" v-model="monthVal" v-on:change="MonthValChange">
                for="item in monthOption" :value="item.Value">{{item.Title}}
select>
　　　　　
    
    
"MainContent" v-cloak>
        class="table" id="DataTable">
            for="(item,index) in dataDetails">
                

@Titles.Code
                
@Titles.Name
                
@Titles.Age
                
@Titles.Phone
                
@Titles.Address
            
{{ item.Code }}
                
{{ item.Name}}
                
{{ item.Age}}
                
{{ item.Phone}}
                
{{ item.Address}}
            

                                     

var DataQueryByStaff = new Vue({
    el: ‘#Information‘,
    data: {
        yearOption: [{ Title: "2020", Value: "2020" }],
        monthOption: [{ Title: ‘Jan‘, Value: "01" }],
        dataDetails: [],
        yearVal: "",
        monthVal: "",
    },    
    methods: {
        GetData: function () {
            var _this = this;
            $.ajax({
                type: "post",
                url: url
                data: {
                    year: this.yearVal,
                    month: this.monthVal,
                },
                async: false,
                success: function (data) {
                    _this.dataDetails = data
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var e = errorThrown.toString();
                    console.log(e);
                }
            })
        },
        YearValChange: function () {
                this.GetData();
        },
        MonthValChange: function () {
                this.GetData();
        },
    mounted: function () {
        this.GetData();
    },    
});