[Vuejs]-Vue.js: Add every new items to the top of the table

by

2👍

✅

The problem is because of :key="item.val"
in

<tr 
          v-for="(item, index) in items"
          :key="item.val"
          >

You are trying to add element with the same key. :key of v-for should be unique.

You can add {"val": 456, "name": "Peter", "sex": "male"} object only one time.

Upd.

Can you try to modify your :key like this?

<tr 
          v-for="(item, index) in items"
          :key="index + '|' + item.val"
          >
👤webprogrammer

-1👍

Add this.$forceUpdate(); after the unshift.

new Vue({
  el: "#app",
  data: {
    itemIndex: 0,
    items: [{
        "val": 1,
        "name": "John",
        "sex": "male"
      },
      {
        "val": 2,
        "name": "Maria",
        "sex": "female"
      },
      {
        "val": 3,
        "name": "Arnold",
        "sex": "male"
      },
    ]

  },
  methods: {
    testPush() {
      this.items.push({
        "val": 456,
        "name": "Peter",
        "sex": "male"
      })
    },
    testUnshift() {
      this.items.unshift({
        "val": 456,
        "name": "Peter",
        "sex": "male"
      })
      this.$forceUpdate();
    },
    testSplice() {
      this.itemIndex--;
      this.items.splice(this.itemIndex, 0, {
        "val": 456,
        "name": "Peter",
        "sex": "male"
      });
    }
  }
})
.fade-enter-active,
.fade-leave-active {
  background-color: none;
  transition: all 2s;
}

.fade-enter,
.fade-leave-to {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="testPush">PUSH</button>
  <button @click="testUnshift">UNSHIFT</button>
  <button @click="testSplice">SLICE TO INDEX -1</button>

  <table>
    <tr>
      <th>index</th>
      <th>Value</th>
      <th>Name</th>
      <th>Sex</th>
    </tr>
    <tbody is="transition-group" name="fade">
      <tr v-for="(item, index) in items" :key="item.val">
        <td>{{ index }}</td>
        <td>{{ item.val }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
      </tr>
    </tbody>
  </table>
</div>
👤Ziv Ben-Or

Leave a comment