Javascript 唯一数据v型vue

在我的模板中选择字段：

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[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="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);
      }
    }
  }
}

---

谢谢，我得到了：

[Vue warn]：属性或方法“index”未在实例上定义，但在渲染期间被引用。确保此属性是被动的

并且

控制台。日志（索引）

是

未定义的

是否将其添加到

v-for

中

v-for=“（用户，索引）在用户中”

谢谢，是的，我添加了它。问题是我需要选择

而不是对象：（.当然，将其声明为数组，效果相同。我已经更新了答案。对不起，我的意思是，我需要
v-model=“selected”
。我用一个示例编辑了我的问题：）。非常感谢。谢谢，组件字段怎么样？对不起，我不能理解你所说的组件字段是什么意思！是的，我的意思是在
选项中：[]
和
所选：{}
字段和
切换showuser
方法。非常感谢。
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);
      }
    }
  }
}