唯一数据v模型vue

Question

在我的模板选择字段中：

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

谢谢！

Answer 1

我建议为每次迭代创建一个新属性，以便找到所选值。 您可以尝试2种可能的选项-

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

Answer 2

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

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