解决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
}

样式如下

解决vue+elementUI中使用v-for循环出多个select下拉框,默认绑定,但改变一个下拉框,其余下拉框也会改变的问题