Remove Item from Array in Vue

How to remove an item from an array in Vue.js

You're using splice in a wrong way.

The overloads are:

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)

Start means the index that you want to start, not the element you want to remove. And you should pass the second parameter deleteCount as 1, which means: "I want to delete 1 element starting at the index {start}".

So you better go with:

deleteEvent: function(event) {
  this.events.splice(this.events.indexOf(event), 1);
}

Also, you're using a parameter, so you access it directly, not with this.event.

But in this way you will look up unnecessary for the indexOf in every delete, for solving this you can define the index variable at your v-for, and then pass it instead of the event object.

That is:

v-for="(event, index) in events"
...

<button ... @click="deleteEvent(index)"

And:

deleteEvent: function(index) {
  this.events.splice(index, 1);
}

Remove item from array in Vue

removeTask: function(task){
    this.tasklist.splice(this.tasklist.indexOf(task), 1);
}

vuejs remove item from array

You have to find the index of id in your array and remove it, see code below

this.form.variations.splice(this.form.variations.indexOf(id), 1);

Removing specific object from array keeps removing last item

There is an error in your favorites-edit-component template, actually in vue template, when you want to use prop, data, computed, mehods,..., dont't use this
=> there is an error here: @click="removeItem(this.index)"
=> in addition, where is index declared ? data ? prop ?
you're calling this.$parent.removeItem(index); then in removeItem you're doing this.favorites_list.splice(this.favorites_list.indexOf(index), 1); this means that you want to remove the value equal to index in you array no the value positioned at the index
=> this.favorites_list[index] != this.favorites_list[this.favorites_list.indexOf(index)]

In addition, I would suggest you to modify the favorites-edit-component component to use event so it can be more reusable:

favorites-edit-component:

<template>
  <div class="column is-half">
    <button class="button is-fullwidth is-danger is-outlined mb-0">
      <span>{{ favorite.name }}</span>
      <span class="icon is-small favorite-delete" @click="$emit('removeItem', favorite.id)">
        <i class="fas fa-times"></i>
      </span>
    </button>
  </div>
</template>

and in the parent component:

<template>
  ...
  <div id="favorites-modal-edit-wrapper" class="columns is-multiline buttons">
    <favorites-edit-component
      v-for="favorite in favorites_list"
      :key="favorite.id"
      :favorite="favorite"
      @removeItem="removeItem($event)"
    />
  </div>
  ...
</template>

<script>
export default {
  data: function () {
    return {
      favorites_list: [],
    };
  },
  methods: {
    ...
    removeItem(id) {
      this.favorites_list = this.favorites_list.filter((favorite) => favorite.id !== id);
    }
    ...
  },
};

vuejs - how can I delete array item within v-for item. element?

Uses Array.splice().

app = new Vue({  el: "#app",  data: {    items: [{'text':'a'},{'text':'b'}]  },  methods: {    deleteItem: function (item, index) {      if(this.items[index] === item) {       // The template passes index as the second parameter to avoid indexOf,       // it will be better for the performance especially for one large array      // (because indexOf actually loop the array to do the match)        this.items.splice(index, 1)      } else {        let found = this.items.indexOf(item)        this.items.splice(found, 1)      }    }  }})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script><div id="app">  <template v-for="(item, index) in items">      {{item.text}}      <button @click="deleteItem(item, index)">Delete me!</button>  </template></div>

How to remove a item in array from my dropdown with Vue JS

Try pass item id to method and filter itemsCart:

new Vue({
  el: "#demo",
  data(){
    return {
      itemsCart:[{id: 1, title: 'Apple Watch <br> Series 5', price: 339.00,}, {id: 2, title: 'Google - <br>Google Home...', price: 129.29,}, {id: 3, title: 'Apple iPhone<br> 11 (64GB, Black)', price: 699.99,}, {id: 4, title: 'Apple iMac 27-<br>inch', price: 999.99,}, {id: 5, title: 'Apple -<br> MacBook Air...', price: 999.99,}]
    }
  },
  methods: {
    removeItem(id) {
      this.itemsCart = this.itemsCart.filter(i => i.id !== id)
    }
  },
  computed: {
    itemsCount() {
      return this.itemsCart.length
    }
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<h3>{{ itemsCount }} items</h3>
  <div v-for="(item, i) in itemsCart" :key="i" class=" hover:bg-gray-100 inline-flex w-full py-3 dark:hover:bg-gray-800">
    <div class="justify-between inline-flex w-full">
      <div class="rounded-md bg-gray-100 block h-12 dark:bg-vd2">
        <img src="../Assets/Img/product1.png" class="w-16 h-12">
      </div>
    <div>
    <p class="font-semibold text-gray-500 dark:text-gray-300" v-html="item.title"></p>
    <span class="text-xs mb-10 text-gray-400">By Apple</span>
    </div>
      <div class="inline-flex">
        <!--<NumberInput/>-->
        <span class="font-semibold text-gray-500 ml-3 mt-5 dark:text-gray-300" v-html="'$'+item.price+'.00'"></span>
        <a @click="removeItem(item.id)" class="dark:text-gray-300">
          <svg data-v-c52069be="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cart-item-remove cursor-pointer feather feather-x">
            <line data-v-c52069be="" x1="18" y1="6" x2="6" y2="18"></line>
            <line data-v-c52069be="" x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Vue: How to remove object from array by it's value?

As you're removing elements from the array, you're changing the index of the ones that remain. If you wanted to remove all the elements, you'd do the following inside your .forEach() :

// Keep removing first array element until they're all gone
App.$refs.userContent.foo.$remove(0);

...but that would be strange to empty an array.

To answer your original question - No. You cannot remove an array element by its value in one step. You first have to find the index of the element, and then remove it by index. In vanilla JS, you can use .splice() to remove an element by its index:

// Remove 4th element from array
myArray.splice(3, 1);

Vue: delete an item from array when it is passed as a prop to a component?

Is this your expectation: https://jsfiddle.net/ittus/Lost5djd/ ?

I emit event when click remove button

  methods: {
    remove: function() {
      console.log(this, this.tab)
      this.$emit('remove', this.index)
    }
  }

and listen to it on parent component

  methods: {
    onRemove(index) {
      this.groups =  [
       ...this.groups.slice(0, index),
       ...this.groups.slice(index + 1)
     ]
    }
  }

If each tab have an id, solution will be more elegant.