Vue2. Удаление конкретного элемента из массива

Помогите, пожалуйста, с проблемой удаления элемента в массиве. Дело в том, что мой splice, удаляет всегда последний элемент в массиве. Пробовал перебирать массив и потом удаление, эффект такой-же. введите сюда описание изображения

ссылка на песочницу: https://codesandbox.io/s/wispy-snowflake-lhc1t?file=/src/App.vue

Метод RemoveField(index) {this.fields.splice(index, 1)} не удаляет выбранный элемент, удаляет всегда последний элемент массива.

Я кинул весь компонент, т.к. еще очень зеленый, возможно это даст полную картину, где я мог чудануть(


Ответы (1 шт):

Автор решения: Alex

в приведенном коде @click="RemoveField(index) , и что тут должно удалиться? переменная index будет иметь всегда 0. Она не определена. Тут либо реактивная переменная должна быть, либо значение какого-то поля

чтобы подсказывать что-то, надо понять. Что удалять? Список языков или уровень языка?

        <select v-model="selectedSkill[index]">
          <option v-for="(item, index) in skillOptions" :key="item.text">
            {{ skillOptions[index].text }}
          </option>
        </select>
      </div>

      <div class="col-2 mb-1 pl-0">
        <button variant="secondary" class="" @click="RemoveField(index)">
          Remove
        </button>
      </div>

index в v-for никак не попадет в RemoveField(index) и надо понимать, что индексы в массиве источнике ну никак не транслируются в select. Там просто значения и все.

тут просто надо @click="RemoveField"

- достаточно переменной, чтобы сохранять значение текста. Можно и value, смотря какая логика

<select v-model="selectedSkill">

а в методе удаления ищем в массиве индекс элемента по текстовому совпадению и только тогда удаляем

    RemoveField() {
      const index = this.skillOptions.findIndex((item)=>{return (item.text===this.selectedSkill)} ) 
       if (index > -1) {
         this.skillOptions.splice(index, 1)
       }
    }
}

такой код будет удалять выбранные элементы в селекте скилов. поскольку общей задачи не понимаю, как-то так.

→ Ссылка