标签：二级 Vue res axios 联动 LoadNClass selectDataB data NName

在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>

标签：二级,Vue,res,axios,联动,LoadNClass,selectDataB,data,NName
来源： https://www.cnblogs.com/bkyr/p/15163676.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。