problem description

VUE two-stage linkage drop-down box, when data modification is made, the second drop-down box does not display the value

1. The List of the second drop-down box is determined by the value of the first drop-down box, that is, the value of the first drop-down box is selected, and the List
loading the second drop-down box is similar to selecting the province, and then select the city
2. When making data changes, use Vue to give the rows to be modified to the template, and then the second drop-down box is unlimited.

the environmental background of the problems and what methods you have tried

1. When making changes, I first loaded the List, of the drop-down box, but it didn"t seem to load.
in the following code, I use provinces and cities as classes, and that"s what my code says.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< table id= "demo" > < tr > < td > < label for= "provice" > Province: < / label > < / td > < td > < select id= "provice" vMurmodel.trim = "steprowtemplate.provice" vMuronVANG change = "threeChange (steprowtemplate.provice)" class= "form-control" > < option vFFOR = "option in provices" VMI bindVue = "option" > {{option} < / option > < / select > < / td > < / tr > < tr > < td > < label for= "interfaceName" > Interface name < / label > < / td > < td > < select id= "city" vMurmodel.trim = "steprowtemplate.city" class= "form-control" > < option vFFOR = "item in citys" VMI bindVue = "item" > {{item}} < / option > < / select > < / td > < / tr > < tr > < td > < input type= "button" v Mustang bindVue = "operationType" class= "btn btn-primary" vMuron Vlick = "createStep ()" style= "height:30px" / > < / td > < / tr > < / table >

< script >
var data = {
provices: [], / / load
citys: [] at the beginning of the page, / / get list
steprowtemplate: {provice:"",city:""}, / / template
steprows: [], / / list
operationType: "add",
},
var vm = new Vue ({

    el: "-sharpdemo",
    data: data,
    methods: {
     threeChange: function (s) {
            vm.citys = [];
            var $promise1 = $.ajax({
                url: "@Url.Action("getcitys")",
                type: "post",
                data: { provice: s },
                dataType: "json"
            });
            $promise1.done(function (data) {
                vm.citys = data;
            });
        },
         //Step
        EditStep: function (steprow) {
           
            vm.steprowtemplate.provice = steprow.provice;
            vm.threeChange(vm.steprowtemplate.provice);
            vm.steprowtemplate.city= steprow.city;
            vm.operationType = "";
            }
       //orStep
       createStep:function(){
       addData=vm.steprowtemplate;
        var $promise = $.ajax({
                url: "@Url.Action("CreateStep")",
                type: "post",
                dataType: "json",
                data: { provice: addData.provice, city: addData.city}
            });
            $promise.done(function (result) {
                if (result != 0) {
                    addData.StepID = result;
                    vm.steprows.push(addData);
                }
                else {
                    alert("");
                }
            });}
         
         

< / script >

what result do you expect? What is the error message actually seen?

when modified, the value of the second drop-down box can be loaded