Как создать свой уникальный v-model для каждого v-select на странице?

Question

[Richard Millie]

Я вывожу такие мультиселект-меню у себя на странице

<template v-slot:item.people="{ item }">
 <v-select
 @input="onInput"
 :items="people"
 v-model="selected"
 item-text="name"
 item-value="surname"
 label="Select"
 return-object
 multiple
></v-select>
</template>

data: {
    // Модель доступных для выбора элементов.
    people: [{
      name: "Adam",
      surname: "Brown",
    }, {
      name: "Bruce",
      surname: "Lee",
    }, {
      name: "Erl",
      surname: "Black",
    }],

    // Модель выбранных элементов.
    selected: [],
  },

Но когда я выбираю один пункт в каком-нибудь меню, он выбирается во всех остальных. Так как у них общая модель v-model. Как мне это исправить?

Answer 1

[Дима Паутов]

data: () => ({
  people: [{
    name: "Adam",
    surname: "Brown",
  }, {
    name: "Bruce",
    surname: "Lee",
  }, {
    name: "Erl",
    surname: "Black",
  }],
  selected: {}
}),
created () {
  this.setModel()
},
methods: {
  setModel () {
    this.people.forEach((user, index) => {
      this.$set(this.selected, `user${index}`, '')
    })
  }
}

Появится модель такого вида

selected: {
user1: '',
user2: '',
user3: '',
//...
}

v-model="selected[`user${index}`]" // если в цикле выводить селекты
v-model="selected.user1" // если просто ручками