data() {
return {
value1: "",
type: [{id: 1, name: '肖明'},{id: 2, name: '小红'},{id: 3, name: '小光'}],
list: [1,2,3,4,5]
}
}
v-for="_item in type"
:value="_item.id"
:key="_item.id"
>{{ _item.name }}
通过循环生成了多个 select框 绑定的都是同一个下拉数据源, v-model 绑定的 value1在data中有定义声明,但是list的length 是不确定的,所以每个select的v-model不可能在data中声明….
想请教下,这种情况下怎么去绑定循环生成的select的值,在改变一个select的值时其他的select不会跟着改变….
回答
你的select会循环生成多个,那你绑定的value肯定也是对应的多个啊?为什么是多个下拉绑定一个value呢?这样肯定会出现改变一个,其他的都会跟着改变呀。
你的value可以根据你的list长度,来生成对应个数的value
// value写成计算属性
computed: {
value() {
var valueArr = this.list.map(item => ({value: ''}))
return valueArr
}
}
select循环的肯定不能只绑定一个value1 你可以选择把list做成一个对象数组
[{value:””},{value:””},{value:””},{value:””}]
循环的时候v-model绑定 item.value
data() {
return {
type: [{id: 1, name: '肖明'},{id: 2, name: '小红'},{id: 3, name: '小光'}],
list:[1, 2, 3, 4, 5],
newList: []
}
}
created() {
this.newList = this.list.map(item => {
return {
model: '',
value: item
};
});
}
v-for="_item in type"
:value="_item.id"
:key="_item.id"
>{{ _item.name }}
基于引用类型数据,预先map原list,新增v-model绑定的value到每条数据里,最后再从list里面遍历取结果
拿到list的时候根据length新增字段吧,然后再绑定上去
比如:
for(let i=0 ;i
let obj = {}
obj.key = 'value'+i
}