vue中Select下拉框用v-model系結了一個值，用v-for遍歷出來多個，改變一個下拉框的選項，其他的都會改變將途中這個遍歷出來多個，改變其中一個的值，其他都會變，我應該怎樣解決？？不讓他們聯動
uj5u.com熱心網友回復：
不要系結同一個v-modeluj5u.com熱心網友回復：
我這資料是回圈出來的， 只能系結一個資料uj5u.com熱心網友回復：
沒有看明白你要表達什么？說清楚一點uj5u.com熱心網友回復：
@summer_雪就是 現在回圈出來的資料下拉框選擇其中一個 其他的資料的下拉框也跟著改變成同樣的值， 因為他們的v-model系結是同一條資料（回圈出來的資料v-mdel不能改變）。現在就是想讓它單獨來選 其他的不受影響
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="app">
<select v-model="selectedA">
<option v-for="option in options" v-bind:value="https://bbs.csdn.net/topics/option.value">{{ option.text }}
</option>
</select>
<span>SelectedA: {{ selectedA }}</span>
<hr />
<select v-model="selectedB">
<option v-for="option in options" v-bind:value="https://bbs.csdn.net/topics/option.value">{{ option.text }}
</option>
</select>
<span>SelectedB: {{ selectedB }}</span>
<hr />
<select v-model="selectedC">
<option v-for="option in options" v-bind:value="https://bbs.csdn.net/topics/option.value">{{ option.text }}
</option>
</select>
<span>SelectedC: {{ selectedC }}</span>
<hr />
</div>
</body>
</html>
<script src="https://bbs.csdn.net/Scripts/VUE/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
selectedA: 'A',
selectedB: 'B',
selectedC: 'C',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
uj5u.com熱心網友回復：
我的是回圈出來的資料 v-model只能系結同一資料。
uj5u.com熱心網友回復：
你現在是有多個select下拉選擇框嗎？每個都是回圈的？uj5u.com熱心網友回復：
1.修改源資料,添加一個selectVal 屬性,并把下拉選單的第一個賦值到這里this.goodsList.forEach((item,index)=>{
item.checkd = false
item.index = index
item.selectVal = item.attr_name[0]
})
2.在視圖層使用剛手動添加的屬性,獲取屬性值
<span>{{item.selectVal}}</span>
3.在下來選擇框中更改源資料中新增加的selectVal的屬性值
selectTypeHandle(item,e,index) {
item.selectVal = e.currentTarget.dataset.value;
},
uj5u.com熱心網友回復：
樓主問題解決了嗎，碰到同樣的問題```js
<el-select
v-for="el in uploadMusiceInfo.tag"
:key="el.id"
v-model="uploadMusiceInfo.tagVal"
class="do-ml10"
:placeholder="el.name"
clearable
@focus="handlezBgmTag(el)"
>
<el-option
v-for="e in uploadMusiceInfo.tagChild"
:key="e.id"
:label="e.name"
:value="https://bbs.csdn.net/topics/e.name"
/>
</el-select>
```
v-model值，改變一個其余的值都改變
uj5u.com熱心網友回復：
多整幾個變數不就完事了
```js
<el-select
v-for="(el,index) in uploadMusiceInfo.tag"
:key="el.id"
v-model="uploadMusiceInfo.tagVal[index]"
class="do-ml10"
:placeholder="el.name"
clearable
@focus="handlezBgmTag(el)"
>
<el-option
v-for="e in uploadMusiceInfo.tagChild"
:key="e.id"
:label="e.name"
:value="https://bbs.csdn.net/topics/e.name"
/>
</el-select>
```
uj5u.com熱心網友回復：
OK，已解決uj5u.com熱心網友回復：
請問怎么解決的uj5u.com熱心網友回復：
v-model 系結一個陣列 , [item.name] 這樣寫試一下uj5u.com熱心網友回復：
這有實作代碼：https://blog.csdn.net/weixin_43900414/article/details/107619197uj5u.com熱心網友回復：
好的，雖然已經解決了，不過還是非常感謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/18663.html
標籤：JavaScript
下一篇：MVC專案的增刪查改