解决vue+elementUI中使用v-for循环出多个select下拉框,默认绑定,但改变一个下拉框,其余下拉框也会改变的问题
我要展示在页面的选择值是fruitsValueOptions里面的数据。
保存成功后,刷新页面。
这样写就不会出现v-model绑定的值相同的情况,展示的就是互不干扰的选择框。
【水果】栏里可以选择【橙子】or【猕猴桃】
【道具】栏里可以选择【叉子】
不会出现【水果】栏选择【橙子】后,道具一栏里也出现了【橙子】
下面是具体的步骤
后端返回数据:
{
"code":0,
"message":"success",
"data":[
{
"fruitsNameId":1,
"fruitsName":"水果",
"fruitsValues":null,
"fruitsValueOptions":[
{
"id":"1",
"name":"橙汁"
},
{
"id":"3158",
"name":"猕猴桃"
}
]
},
{
"fruitsNameId":2,
"fruitsName":"道具",
"fruitsValues":null,
"fruitsValueOptions":[
{
"id":"2",
"name":"叉子"
}
]
},
{
"fruitsNameId":3,
"fruitsName":"方式",
"fruitsValues":null,
"fruitsValueOptions":[
{
"id":"3",
"name":"吃"
}
]
}
],
"success":true
}
样式如下