javascript - 唯一数据v模型值

在我的模板选择字段中：

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的特定用户选择字段中设置此值。

谢谢！

最佳答案

您可以将索引传递给切换功能：

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

关于javascript - 唯一数据v模型值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49833682/