V-модель того же значения в цикле

Question

Я создал петли для некоторых v-select. Когда я ввожу v-model, это делает мое v-select таким же значением. Как я могу это исправить?

<template>
  <div class="create-group">
    <div class="form-group">
      <button class="btn btn-defualt addGroup" v-on:click="addmember(member.value)">
        <h3>Crate Group</h3>
      </button>

      <div class="member">
        <div class="row">
          <div class="col-lg-2" style="padding-right: 0;">
            <h3>member in grroup :</h3>
            {{member}}
          </div>
          <div class="col-lg-10 list" v-bind:class="{'list-member' : listActive}">
            <div class="input-member" v-for="list in lists" v-bind:key="list.id">
              <h3>{{list.count}}.</h3>
              <div class="select">
                <v-select :options="options" v-model="member"></v-select>
              </div>
            </div>
            <div class="add-member" v-on:click="add()">
              <h4>+ add member</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Мои данные:

data() {
  return {
    member: [],
    newitem: { name: "", type: [] },
    options: [],
    lists: [{ count: "1" }, { count: "2" }, { count: "3" }],
  };
},

Answer 1

Вы назначаете выбранное значение для member, которое одинаково для всех селекторов. Вам необходимо использовать разные переменные для разных списков, например:

<v-select :options="options" v-model="member[list.id]"></v-select>

data() {
    return {
      member: {}, // <- This is object now
      newitem: { name: "", type: [] },
      options: [],
      lists: [{ count: "1" }, { count: "2" }, { count: "3" }],
    };
  },