VUEJS удаляет элемент из списков?

можно удалить определенный элемент из списков. Я пробовал эти функции для удаления элемента

pop() = удалить последний элемент

$remove (index) = не удалять элемент из списков

remove (index) = undefined function

unshift (index) = добавить новый и пустой элемент

splice (index) = удалить все элементы из индекса

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

ниже мой код js

var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' },
      { message: 'Bar1' },
      { message: 'Bar2' },
      { message: 'Bar3' },
      { message: 'Bar4' }
    ]
  },
  method : {
    removeElement : function(index){
        this.items.$remove(index);
    }
  }
})

ниже мой HTML-код

<ul id="example-1">
  <li v-for="(key, item) in items">
    {{ item.message }}
    <button v-on:click="removeElement(key)">remove</button>
  </li>
</ul>

Ответ 1

$remove устарел в Vue.js 2.0 и заменен на splice, как указано в документах. Убедитесь, что вы добавили второй параметр splice, чтобы он работал.

Миграция с Vue 1.x - 2.0

methods: {
  removeElement: function (index) {
    this.items.splice(index, 1);
  }
}

Ответ 2

Вы можете использовать Vue.delete, если ваша версия Vue равна 2.2.0 +

Vue.delete(this.items, index);

Ответ 3

Во-первых, вы должны исправить ключ methods.

Затем вы должны передать элемент методу $remove, а не index. [ref]

https://jsfiddle.net/790og9w6/

Ответ 4

Функция $.remove заменена на $.delete.

Вы можете вызвать его так:

this.$delete(this.someItems, itemIndex).

Он работает на Object, а также Array. С объектами вам нужно использовать объект с ключом. С массивами вы передаете индекс элемента, который хотите удалить.

Вот пример скрипта: https://jsfiddle.net/james2doyle/386w72nn/

ИЗМЕНИТЬ

Я добавил пример для массива