Vue中如何实现多个选择表单元素互相独立()

【Vue中如何实现多个选择表单元素互相独立()】Vue中如何实现多个选择表单元素相互独立?这个问题是说,使用足够多的选择表单元素,使得这些元素与数据(如数组)的大小相匹配,并且这些表单元素互相独立,选择一个元素不会应用其它元素的值。
实现代码如下面的代码:

var app = new Vue({ el: "#app", delimiters: ["[[", "]]"], data: { selected: [], // 创建一个selected数组 options: [{"id":20,"supp_name":"test1"},{"id":21,"supp_name":"test2"},{"id":34,"supp_name":"supertest"}] }, watch: { options: { immediate: true, handler (options) { // 从options中初始化"supp_name" this.selected = options.map(({ supp_name }) => supp_name) } } } })

< script src="http://img.readke.com/220411/0T30M445-0.jpg">< /script> < div id="app"> < div v-for="(_, i) in selected"> < form action=""> < select v-model="selected[i]"> < option v-for="option in options" :value="http://www.srcmini.com/option.supp_name"> [[ option.supp_name ]] < /option> < /select> < span>Chosen: [[ selected[i] ]]< /span> < /form> < /div> < pre>selected = [[ selected ]]< /pre> < /div>

    推荐阅读