Vue-二级联动

在Visual Studio里使用Vue

在 data（）{}函数中 定义两个数组

用来接收数据

 

 

在 methods 方法里

//一级下拉数据获取
            loadNClass() {
                axios.get('/default/LoadNClass?node=0')
                    .then(res => {
                        this.selectDataA = res.data;
                        this.selectDataA.unshift({ "Id": "0", "NName": "请选择" });

                    })
            },
            //二级下拉数据获取
            loadNClassB() {
                if (this.nida > 0) {
                    axios.get('/default/LoadNClass', {
                        params: {
                            node: this.nida
                        }
                    })
                        .then(res => {
                            this.selectDataB = res.data;
                            this.selectDataB.unshift({ "Id": "0", "NName": "请选择" });
                            this.nidb = 0;
                        })
                }
                this.selectDataB = [];
            }

在 html里

分类
    <select v-model="nida" v-on:change="loadNClassB">@*v-model 用来接收选中数据的ID   v-on:change 点击事件 调用的是第二级数据获取方法*@
        <option v-for="(item,index) in selectDataA" :value="item.Id">{{item.NName}}</option>
    </select>
    品牌
    <select v-model="nidb">
        <option v-for="(item,index) in selectDataB" :value="item.Id">{{item.NName}}</option>
    </select>