vue.js 三级联动

code:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>


<div id="pro_citys">

    省:<select id="provice" v-on:change="getCitys" v-model="selected">
        <option v-for="item in provices" :value="item.Id">{{item.ProviceName}}</option>
    </select>

    市：
    <select id="city">
        <option v-for="item in citys" :value="item.Id">{{item.CityName}}</option>
    </select>

</div>

<script>

    var vm = new Vue({
        el: "#pro_citys",
        data: {
            selected: "1",
            provices: [],
            citys: []
        },
        methods: {
            getCitys: function () {

                getCItys(vm.$data.selected);
            }
        }
    });

    $.get('/vue/GetProvice', function (result) {
        vm.$data.provices = result;
        vm.$data.selected = vm.$data.provices[0].Id;
        getCItys(vm.$data.selected);
    })

    var getCItys = function (pId) {
        $.get('/vue/GetCitysProviceId?proviceId=' + pId, function (result) {
            vm.$data.citys = result;
        })
    }

</script>