[Vuejs]-Vue2 error when trying to splice last element of object

by

0👍

✅

The problem is happening as you have having selectItem bind at li level, so event when you click cross button, selectItem gets executed and that same item gets deleted as well, causing this error.

One way to solve this problem can be moving the selectItem binding inside li as follows

  <li v-for="(item, index) in list">
    <a v-on:click = "selectItem(index)" >{{ item.name }}</a>
    <div v-on:click="deleteItem(index)">X</div>
  </li>

See working fiddle.

Another approach can be when printing selectedItem.name in your HTML, you put a null check, whether selectedItem exist or not like following:

 <span>{{selectedItem && selectedItem.name}}</span>

See Working fiddle.

👤Saurabh

Leave a comment