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

通過循環(huán)生成了多個 select框 綁定的都是同一個下拉數(shù)據(jù)源， v-model 綁定的 value1在data中有定義聲明，但是list的length 是不確定的，所以每個select的v-model不可能在data中聲明….

想請教下，這種情況下怎么去綁定循環(huán)生成的select的值，在改變一個select的值時其他的select不會跟著改變….

回答

你的select會循環(huán)生成多個，那你綁定的value肯定也是對應(yīng)的多個啊？為什么是多個下拉綁定一個value呢？這樣肯定會出現(xiàn)改變一個，其他的都會跟著改變呀。

你的value可以根據(jù)你的list長度，來生成對應(yīng)個數(shù)的value

// value寫成計算屬性

computed: {

value() {

var valueArr = this.list.map(item => ({value: ''}))

return valueArr

}

}

select循環(huán)的肯定不能只綁定一個value1 你可以選擇把list做成一個對象數(shù)組

[{value:””},{value:””},{value:””},{value:””}]

循環(huán)的時候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 }}

基于引用類型數(shù)據(jù)，預(yù)先map原list，新增v-model綁定的value到每條數(shù)據(jù)里，最后再從list里面遍歷取結(jié)果

拿到list的時候根據(jù)length新增字段吧,然后再綁定上去

比如：

for(let i=0 ;i

let obj = {}

obj.key = 'value'+i

}

總結(jié)

以上是生活随笔為你收集整理的vue下拉框值改变_vue select下拉框绑定值不跟着变问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。