VUEJS remove Element From Lists?

Question

it is possible to remove specific element from lists. i tried this functions for remove element

pop() = remove last element

$remove(index) = not remove any element from lists

remove( index ) = undefined function

unshift( index ) = add new and empty element

splice( index ) = remove all element from index

please help me to remove specific element from lists.

below is my js code

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);
    }
  }
})

below is my HTML code

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

@Lukasz Wiktor has the right answer for Vue version 2.2.0+. For Vue.js 2 : v-for="(key, item) in items" must be v-for="(item, index) in items" and for Vue.js 2.2.0+ you need the key attribute : <li v-for="(item, index) in items" :key="item"> github.com/vuejs/vue/releases/tag/… — Happyriri
– Happyriri, Commented Mar 30, 2017 at 19:23

tony19 · Accepted Answer · 2022-07-15 19:42:19Z

76

$remove is deprecated in Vue.js 2.0 and replaced by splice as stated in the docs. Make sure you add the 2nd parameter of splice for it to work.

Migration From Vue 1.x - 2.0

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

edited Jul 15, 2022 at 19:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 17, 2016 at 15:54

jonan.pineda

1,30411 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 19:49:22Z

34

You can use Vue.delete if your Vue version is 2.2.0+

Vue.delete(this.items, index);

edited Jul 15, 2022 at 19:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 3, 2017 at 6:38

Lukasz Wiktor

20.5k6 gold badges73 silver badges83 bronze badges

1 Comment

james2doyle Over a year ago

I used this (Vue.delete(state.items, 'someitem')) when using the vuex store since state does not have a $delete or delete method.

james2doyle · Accepted Answer · 2017-05-25 17:04:15Z

24

The $.remove feature has been replaced with $.delete.

You can call it like so:

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

It works on Object as well as Array. With objects, you need to use a keyed object. With arrays, you pass in the index of the item you want to delete.

Here is a fiddle example: https://jsfiddle.net/james2doyle/386w72nn/

EDIT

I added an example for an array as well

edited May 25, 2017 at 17:04

answered May 16, 2017 at 18:05

james2doyle

1,43920 silver badges21 bronze badges

3 Comments

pilat Over a year ago

I've tried this.$delete on a Array, it makes appropriate value "undefined", but doesn't remove it from the list.

pilat Over a year ago

Can't use Vue developer tools on JS fiddle. But in my case it was in the Vue dev tools where I've noticed that array became something like: ['A', undefined, 'B', 'C'], after I've used this.$delete(). In the visual UI all seemed Ok, though. P.S.: with myArray.splice(index, 1) there was no such issue. I.e., I've got it right both in the UI and in the Vue Dev Tools.

Francisco Rodeño Sanchez Over a year ago

this removed my warning about mutating in store state, thanks

tony19 · Accepted Answer · 2022-07-14 23:56:25Z

17

$delete can use inline in @click:

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

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

edited Jul 14, 2022 at 23:56

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 1, 2018 at 12:48

Mohsen

4,2451 gold badge34 silver badges33 bronze badges

1 Comment

GreenTurtle Over a year ago

Thanks for that easy solution. This should be the accepted answer as this is just the smartest way to solve it imho.

pespantelis · Accepted Answer · 2016-02-17 14:51:20Z

1

Firstly, you should fix the methods key.

Then, you should pass the item to the $remove method, not the index. [ref]

https://jsfiddle.net/790og9w6/

answered Feb 17, 2016 at 14:51

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Comments

tony19 · Accepted Answer · 2022-09-06 19:25:43Z

1

If anyone wonders: $delete has been removed in VueJS 3 ( https://v3-migration.vuejs.org/breaking-changes/introduction.html#removed-apis ). Now it is possible to use javascripts native splice(index, count of objects to be deleted).

edited Sep 6, 2022 at 19:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 10, 2021 at 23:25

lttm

214 bronze badges

Collectives™ on Stack Overflow

VUEJS remove Element From Lists?

6 Answers 6

Comments

1 Comment

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related