Vuejs list rendering using index

Question

So I've been using vuejs for a few months and I couldn't understand what is happening here. I did this I modified the vuejs code in list rendering for a bit

html:

<ul id="array-with-index" class="demo">
  <li v-for="(item, index) of items" :key = "index">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
    <button @click = "removeItem(index)"> remove </button>
  </li>
  
  <button @click = "addItem"> add </button>
</ul>

And this is the code in javascript:

Vue.createApp({
  data() {
    return {
      parentMessage: 'Parent',
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  },
  methods: {
    removeItem(index){
      this.items.splice(index, 1); 
    },
    addItem(){
      this.items.push({message: "hello"}); 
    }
  }
}).mount('#array-with-index')

Every time I pushed a few new item in items and decided I would delete the item before the last item. It deletes the last item instead. Why does this happen? and how can I remedy this?

@DrPlague In VueJS, we mostly use [ for in operator ] instead of [ for of operator ]. Try to filter the array and put the filtered into the items. Or you can use compute property to do the same thing and return the filtered items. [ Compute property is a reactive function and that means if one of its dependencies change, it'll change as well. Otherwise, it won't [ Optimization manner ] — Erfan Motallebi
– Erfan Motallebi, Commented Sep 6, 2021 at 8:06
Even though It is working, It is highly recommended not to use index for the unique keys. More info — DecPK
– DecPK, Commented Sep 6, 2021 at 8:21

abubakri olaitan · Accepted Answer · 2021-09-06 11:24:17Z

Vue keeps tabs of the items in the list by using the :key attribute. In your code, you are using the index of the array (items) to keep track of the elements in items. Any operation like, splice, or slice, alters the index of the elements in that arrays. This causes the keys to be mismatched. In other to remedy this, assign a unique keys to element in the items like this

Vue.createApp({
  data() {
    return {
      parentMessage: 'Parent',
      items: [{ message: 'Foo', id:'uniqueId1' }, { message: 'Bar', id, 'uniqueId2'  }]
    }
  },
  methods: {
    removeItem(id){
      // find the index of the id
      let index = this.items.findIndex((element) => element.id == id )
      this.items.splice(index, 1); 
    },
    addItem(){
      let id = generateIdFunc() // a function that generate random id
      this.items.push({message: "hello", id}); 
    }
  }
}).mount('#array-with-index')

In your component you can now have it like so

<ul id="array-with-index" class="demo">
  <li v-for="(item, index) of items" :key = "items.id">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
    <button @click = "removeItem(index)"> remove </button>
  </li>
  
  <button @click = "addItem"> add </button>
</ul>
enter code here

Esa Kian · Accepted Answer · 2021-09-06 10:59:41Z

0

You should use for/in instead of for/of

<ul id="array-with-index" class="demo">
  <li v-for="(item, index) of items" :key = "index">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
    <button @click = "removeItem(index)"> remove </button>
  </li>

  <button @click = "addItem"> add </button>
</ul>

answered Sep 6, 2021 at 10:59

Esa Kian

2811 gold badge5 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vuejs list rendering using index

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related