Vue проблема реактивности при удалении индекса - PullRequest
Новая
       19

Vue проблема реактивности при удалении индекса

0 голосов
/ 25 марта 2019

У меня есть небольшое приложение Vue с 3 кнопками 

<button @click="add(1)">1</button>
<button @click="add(2)">2</button>
<button @click="add(3)">3</button>

Число добавляется в массив

так обычно вы можете получить 

[1,2,3,1,3]

Я вывожу их в виде списка 

<div class="numbers" v-for="(number, index) in numbers">
  <span @click="removeNumber(index)">{{ number }}</span>
</div>

Однако мой метод удаления числа делает это 

removeNumber(index) {

  Vue.delete(this.numbers, index ); // I have also used splice here

},

Данные (цифры) показывают правильный результат, однако пользовательский интерфейс всегда удаляет последний элемент, а не тот, который мне нужен.

так что если бы у меня было 

numbers = [1,2,3]

и я попытался удалить номер 2. Данные были бы правильными, но пользовательский интерфейс ВСЕГДА просто удаляет номер 3.

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

...