Vue 2未调用属性

Question

好吧，我有4个下拉列表，我根据所选的AJAX选项动态设置后续选项。但由于某些原因，观察者方法不再被调用。

  

翻译

     

国家/地区：选择国家/地区

     

部门：选择部门

     

位置：选择一个位置

     

区域：选择区域

这是属于上一个表单部分的HTML代码：

<div class="row">
    <fieldset class="form-group col-md">
        <label for="country" class="control-label">Pa&iacute;s</label>
        <select class="form-control" name="country" id="country" v-model="selectedCountry" @change="selectCountry()">
            <option :value="0" :selected="selectedCountry">Elija un pa&iacute;s</option>
            <option v-for="country in countries" :value="country.id">@{{ country.name }}</option>
        </select>
    </fieldset>
    <fieldset class="form-group col-md">
        <label for="department" class="control-label">Departamento</label>
        <select class="form-control" name="department" id="department" v-model="selectedDepartment" @change="selectDepartment()">
            <option :value="0" :selected="selectedDepartment">Elija un Departamento</option>
            <option v-for="department in departments" :value="department.id">@{{ department.name }}</option>
        </select>
    </fieldset>
    <fieldset class="form-group col-md">
        <label for="location" class="control-label">Localidad</label>
        <select class="form-control" name="location" id="location" v-model="selectedLocation" @change="selectLocation()">
            <option :value="0" :selected="selectedLocation">Elija una localidad</option>
            <option v-for="location in localities" :value="location.id">@{{ location.name }}</option>
        </select>
    </fieldset>
    <fieldset class="form-group col-md">
        <label for="zone" class="control-label">Zona</label>
        <select class="form-control" name="zone" id="zone" v-model="selectedZone">
            <option :value="0" :selected="selectedZone">Elija una zona</option>
            <option v-for="zone in zones" :value="zone.id">@{{ zone.name }}</option>
        </select>
    </fieldset>
</div>

当然，这是在<div id="app"></div>内。这是Javascript：

const app = new Vue({
    el: '#app',
    data: {
        ...
        countries: [],
        departments: [],
        localities: [],
        zones: [],
        ...
    },
    mounted: function() {
        ...
        this.loadCountries(5);
        this.loadDepartments(5);
        this.loadLocalities(5);
        this.loadZones(5);
        ...
        if(!this.selectedCountry) {
            $('#department').val("");
            $('#department').attr('disabled', 'disabled');
        }
        if(!this.selectedDepartment) {
            $('#location').val("");
            $('#location').attr('disabled', 'disabled');
        }
        if(!this.selectedLocation) {
            $('#zone').val("");
            $('#zone').attr('disabled', 'disabled');
        }
    },
    created: function() {
        this.expenses = expensesValue;
        this.selectedCountry = formSelectedCountry;
        this.selectedDepartment = formSelectedDepartment;
        this.selectedLocation = formSelectedLocation;
        this.selectedZone =  formSelectedZone;
    },
    methods: {
        ...
        loadCountries: function(total) {
            axios.get('/api/inmuebles/paises/')
                .then(function (response) {
                    app.countries = response.data;
                });

            total = (total <= this.countries.length) 
                ? total 
                : this.countries.length;

            if(total) {
                var newArr = [];
                for(i=0; i<total; i++) {
                    newArr.push(this.countries[i]);
                }
                this.countries = newArr;
            }            
        },
        loadDepartments: function(total) {
            axios.get('/api/inmuebles/departamentos/')
                .then(function (response) {
                    app.departments = response.data;
                });

            total = (total <= this.departments.length) 
                ? total 
                : this.departments.length;

            if(total) {
                var newArr = [];
                for(i=0; i<total; i++) {
                    newArr.push(this.departments[i]);
                }
                this.departments = newArr;
            }        
        },
        loadLocalities: function(total) {
            axios.get('/api/inmuebles/localidades/')
                .then(function (response) {
                    app.localities = response.data;
                });

            total = (total <= this.localities.length) 
                ? total 
                : this.localities.length;

            if(total) {
                var newArr = [];
                for(i=0; i<total; i++) {
                    newArr.push(this.localities[i]);
                }
                this.localities = newArr;
            }        
        },
        loadZones: function(total) {
            axios.get('/api/inmuebles/zonas/')
                .then(function (response) {
                    app.zones = response.data;
                });

            total = (total <= this.zones.length) 
                ? total 
                : this.zones.length;

            if(total) {
                var newArr = [];
                for(i=0; i<total; i++) {
                    newArr.push(this.zones[i]);
                }
                this.zones = newArr;
            }        
        },
        selectCountry: function() {
            if(this.selectedCountry < 1) { return; }
            axios.get('/api/inmuebles/pais/' + this.selectedCountry)
                .then(function (response) {
                    var data = response.data;
                    if(data.departments.length > 0) {
                        var departments = [];
                        $.each(data.departments, function (index, value) {    
                            departments.push(value);
                        });
                        app.departments = departments;
                    }
                });
        },
        selectDepartment: function() {
            if(this.selectDepartment < 1) { return; }
            axios.get('/api/inmuebles/departamento/' + this.selectedDepartment)
                .then(function (response) {
                    var data = response.data;
                    if(data.localities.length > 0) {
                        var localities = [];
                        $.each(data.localities, function (index, value) {
                            localities.push(value);
                        });
                        app.localities = localities;
                    }
                });
        },
        selectLocation: function() {
            if(this.selectedLocation < 1) { return; }
            axios.get('/api/inmuebles/localidad/' + this.selectedLocation)
                .then(function (response) {
                    var data = response.data;
                    if(data.zones.length > 0) {
                        var zones = [];
                        $.each(data.zones, function (index, value) {
                            zones.push(value);
                        });
                        app.zones = zones;
                    }
                });
            },
        ...
        },
        watch: {
            selectedCountry: function(value) {
            if(value > 0) {
                $('#department').removeAttr('disabled');
            } else {
                $('#department').attr('disabled', 'disabled');
                $('#location').attr('disabled', 'disabled');
                $('#zone').attr('disabled', 'disabled');
                this.selectedDepartment = null;
                this.selectedLocation = null;
                this.selectedZone = null;
            }
        },
        selectedDepartment: function(value) {
            if(value > 0) {
                $('#location').removeAttr('disabled');
            } else {
                $('#location').attr('disabled', 'disabled');
                $('#zone').attr('disabled', 'disabled');
                this.selectedLocation = null;
                this.selectedZone = null;

            }
        },
        selectedLocation: function(value) {
            if(value > 0) {
                $('#zone').removeAttr('disabled');
            } else {
                $('#zone').attr('disabled', 'disabled');
                this.selectedZone = null;
            }
        }
    }
});

你看到问题，还是有问题？提前谢谢。