在我的模板选择字段中:
li(v-for="user in users", :id="'user_' + user.id")
.user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
select(v-model="selected" :options="options")
在我的vue组件中:
export default {
data() {
return {
options: [
{
value: 'option1',
label: 'Option 1',
iconLeft: 'user'
},
],
selected: ['option1']
},
toggleShowUser(user) {
this.$set(this.selected, 0, "5ad0ac33a8abbc3fe4ce2863")
}
}
}
问题是this.selected
值在所有用户中选择了模板中的字段。
我想在具有特定ID的特定用户选择字段中设置此值。
谢谢!
答案 0 :(得分:1)
我建议为每次迭代创建一个新属性,以便找到所选的值。您可以尝试两种可能的选项 -
li(v-for="user in users", :id="'user_' + user.id")
.user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
select(v-model="selected[user.id]" :options="options")
export default {
data() {
return {
options: [],
selected: []
},
toggleShowUser(user) {
this.$set(this.selected[user.id], "5ad0ac33a8abbc3fe4ce2863")
}
}
}
或
li(v-for="user in users", :id="'user_' + user.id")
.user-management(@click="toggleShowUser(user)", :id="'user' + user.id")
select(v-model="user.selected" :options="options")
export default {
data() {
return {
options: [],
},
toggleShowUser(user) {
this.$set(user.selected, "5ad0ac33a8abbc3fe4ce2863")
}
}
}
答案 1 :(得分:1)
您可以将索引传递给切换功能:
li(v-for="user in users", :id="'user_' + user.id")
.user-management(@click="toggleShowUser(user))", :id="'user' + user.id")
select(v-model="selected.includes(user.id)" :options="options")
并更新功能代码:
export default {
data() {
return {
options: [],
selected: [],
},
toggleShowUser(user) {
if (this.selected.includes(user.id)) {
// remove
this.selected = this.selected.filter(id => id !== user.id);
} else {
// insert
this.selected.push(user.id);
}
}
}
}