VUEJS eliminar Elemento De Las Listas?

Es posible eliminar elementos específicos de las listas. probé esta función para eliminar elemento

Pop () = remove last element

Remove remove (index) = no eliminar ningún elemento de las listas

Remove (index) = undefined function

Unshift (index ) = agregar elemento nuevo y vacío

Splice( index ) = remove all element from index

Por favor, ayúdame a eliminar elementos específicos de las listas.

Abajo está mi js código

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

A continuación se muestra mi código HTML

<ul id="example-1">
  <li v-for="(key, item) in items">
    {{ item.message }}
    <button v-on:click="removeElement(key)">remove</button>
  </li>
</ul>
 26
vue.js
Author: Mantas D, 2016-02-17
Source

5 answers

$remove está en desuso en SDV.js 2.0 y sustituido por splice como se indica en el docs. Asegúrese de agregar el segundo parámetro de splice para que funcione.

Migración Desde el Sdv 1.x - 2.0

methods: {
  removeElement: function (index) {
    this.items.splice(index, 1);
  }
}
 45
Author: jonan.pineda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-17 15:54:45

Puede usar Vue.eliminar si su versión Vue es 2.2.0 + 

Vue.delete(this.items, index);
 20
Author: Lukasz Wiktor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-03 06:38:16

La característica $.remove ha sido reemplazada por $.delete.

Puedes llamarlo así:

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

Funciona tanto en Object como en Array. Con los objetos, es necesario utilizar un objeto con clave. Con arrays, pasa el índice del elemento que desea eliminar.

Aquí hay un ejemplo de violín: https://jsfiddle.net/james2doyle/386w72nn /

EDITAR

He añadido un ejemplo para una matriz también

 11
Author: james2doyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-25 17:04:15

Delete delete puede usar inline en @click: 

<ul id="example">
   <li v-for="(item, key) in items">
       {{ item.message }}
       <button @click="$delete(items, key)">remove</button>
   </li>
</ul>

Https://vuejs.org/v2/api/#vm-delete

 3
Author: Mohsen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-01 12:48:23

En primer lugar, debe fijar la tecla methods.

Entonces, debe pasar el elemento al método $remove, no al index. [ref]

Https://jsfiddle.net/790og9w6/

 2
Author: Pantelis Peslis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-17 14:51:20