Почему vuejs удаляет элемент с конца?

Question

[Ghost2692]

Есть проблема, vue удаляет последний элемент массива, игнорируя указанный индекс, может я где-то допустил ошибку?

<div id="segment">
  <button @click="add()">
Add
</button>
  <div v-for="(item, index) in conditionList" v-bind:key="conditionList.id">
    <select class="form-control" style="min-width: 175px;" v-model="selectField[index]">
           <optgroup v-for="(category, key) in categories"  :label="category" >
                <template v-for="(labels, title) in nameFields">
                     <option v-for="(label, name) in labels"
                                   :value="name"
                                    v-if="title == key"
                                    :disabled="selectField.includes(name)" >
                                       {{label}}
                     </option>
                </template>
           </optgroup>
    </select>
    <button @click="conditionList.splice(index, 1)">
      Delete
    </button>
  </div>
</div>

new Vue({
  el: '#segment',
  data: {
    conditionList: [{
      id: 1,
    }, ],
    nextId: 2,
    selectField: [],
    categories: {
      "groups": "Группы",
      "fields": "Поля",
      "statistic": "Статистика"
    },
    nameFields: {
      "groups": {
        "groups": "Группы"
      },
      "fields": {
        "email": "Email",
        "name": "Имя",
        "last_name": "Фамилия",
      },
      "statistic": {
        "opens": "Открыли",
        "transitions": "Переходы",
        "sent": "Отправлено",
        "mailing": "Рассылка"
      }
    },
  },
  methods: {
    add: function() {
      this.conditionList.push({
        id: this.nextId++,
      })
    }
  }
})

Answer 1

[0xD34F]

Удаляется где надо, проблема в том, что вы разделили данные со значениями селектов и их id. Одно удаляете, а другое остаётся. Храните значение в том же объекте, что и id. Т.е., вырезаете selectField, а v-model="selectField[index]" заменяете на v-model="item.value", например, а selectField.includes(name) на conditionList.some(n => n.value === name).

Comments

[Ghost2692]

0xD34F попробуй здесь и увидишь результат https://jsfiddle.net/Nazar2692/h29uxtno/

[0xD34F]

Ghost2692, и чо? Ещё раз - из conditionList удаляется где надо. А значения (selectField) вы не удаляете - вот и отображается не то, что надо.

[Ghost2692]

0xD34F поменял в select v-model="selectField[item.id]" и тепер все работает.
Спасибо 0xD34F

[0xD34F]

Ghost2692, да не надо никакого selectField, всё гораздо проще.

[Ghost2692]

0xD34F, я почти всегда все усложняю, этот пример как раз то и что надо, очень тебе благодарен за помощ :)

[Ghost2692]

0xD34F, Привет, хочу еще одно спросить, как правильно сделать выборы со сравнением выбранных полей, когда выбираешь одно появляется другое и так где-то три и больше селекта. Данные будут с базы. пример

[0xD34F]

Ghost2692, не вижу прямой связи с исходным вопросом. Оформляйте новый. Где будет подробно рассказано, что вам надо, а не как сейчас.

Answer 2

[NaN]

1) Выглядит странно, у вас в массиве conditionList есть объект с id, но в самом conditionList нет id. Возможно в этом проблема.
v-bind:key="conditionList.id"

2)

vue удаляет элемент с объекта

Так все таки из массива вы удаляете или из какого-то объекта?