Vuejs2 Vue多个相互独立的选择表单

Vuejs2 Vue多个相互独立的选择表单,vuejs2,Vuejs2,我需要一个解决方案,如何使尽可能多的选择形式作为我的选项数据长度和每个形式必须相互独立。这意味着,如果我在一个表单中选择了所选值,它就不能覆盖其他表单中的所选值。此外,我需要在每个表单中为第一个表单预先设置所选值,它需要显示所选的第一个选项,为第二个=第二个选项,依此类推 var app=新的Vue{ el:应用程序, 分隔符:[[,]], 数据:{ 选定:, 选项:[ {id:20,支持名称:'test1'}, {id:21,支持名称:'test2'}, {id:34,支持名称:'supert

我需要一个解决方案,如何使尽可能多的选择形式作为我的选项数据长度和每个形式必须相互独立。这意味着,如果我在一个表单中选择了所选值,它就不能覆盖其他表单中的所选值。此外,我需要在每个表单中为第一个表单预先设置所选值,它需要显示所选的第一个选项,为第二个=第二个选项,依此类推

var app=新的Vue{ el:应用程序, 分隔符:[[,]], 数据:{ 选定:, 选项:[ {id:20,支持名称:'test1'}, {id:21,支持名称:'test2'}, {id:34,支持名称:'supertest'}, ] }, } [[option.supp_name]] 已选择:[[已选择]] 它显示3个表单,但当我选择一个表单时,它会覆盖所有表单。它是如何被修复的?

您将需要尽可能多的选定引用,就像有表单一样

比如说

var app=新的Vue{ el:应用程序, 分隔符:[[,]], 数据:{ 所选:[],//将所选内容设置为数组 选项:[{id:20,支持名称:test1},{id:21,支持名称:test2},{id:34,支持名称:supertest}] }, 观察:{ 选项:{ 立即:是的, 处理程序选项{ //从选项中初始化为供应商名称 this.selected=options.map{supp_name}=>supp_name } } } } [[option.supp_name]] 已选择:[[已选择[i]]]
菲尔,谢谢你的解释。但我还有一个问题。如何使用第一个表单的值预先设置默认值它必须是test1,第二个表单-test2,最后一个-supertest?@Dmitry\u one我更新了我的答案以显示如何设置默认值请告诉您如何添加在更改选择值时侦听的方法?