当前位置：首页 > 网络编程 > JavaScript > 详细页面

vue使用select间相互绑定

时间：2020-07-21来源：www.pcxitongcheng.com作者：电脑系统城

让这两个select相互绑定，让roleOptions选取值后，worklist弹出得是roleOptions值

<el-select v-model="postForm.projectName" placeholder="请选择" @change="getList(postForm)">
<el-option
v-for="item in roleOptions"
:key="item.key"
:label="item.label"
:value="item.key">
</el-option>
<el-select v-model="postForm" placeholder="请选择" value-key="id" @change="getList2(postForm)">
<el-option
v-for="item in worklist"
:label="item.productName"
:value="item">
</el-option>
首先在created里面获取值，设res为null，传入getlist中；
async created() {
this.lastWorklist = await api_price_list({},this.queryParam);
let res = null;
this.getList(res)
},
然后在methods中进行判断
methods: {
async getList(res) {
　　this.listLoading = true
　　如果res为null获取worklist
　　 if(res != null){
　 this.worklist = [];
　　　如果res里面的获取数据为s或y则绑定不同的值
if(res.projectName == "s"){
this.lastWorklist.data.list.forEach(item => {
if(item.app == res.projectName){
this.worklist.push(item);
}
});
}
　else if(res.projectName == "y"){
　　this.lastWorklist.data.list.forEach(item => {
　　if(item.app == res.projectName){
　　this.worklist.push(item);
　　}
　　});
　　}
　}
this.listLoading = false
},
然后在getlist2里面在第二个select组件进行传值绑定
getList2(res){
if(res.app=="s"){
this.postForm.projectName = "抖音";
}
else if(res.app == "y"){
this.postForm.projectName = "快手";
}
},

vue使用select间相互绑定

相关信息

热门系统总排行

装机必备

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载