0

Given this link I am learning how to force render a component via key-changing technique.

The article mentioned the link above states that there is a difference between binding to a key-changing technique using :key=index and :key=person.id" i created the below posted example to experiment the difference.

At run time when i click handlerClickComp1 or handlerClickComp2 i see no difference, and for each click on these handlers only onBeforeUpdate and onUpdated are called.

Would you please point out the difference between the two approaches.

Code:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <button @click="handleClickComp1">del element</button>
  <button @click="handleClickComp2">del element2</button>
  <ul>
  <li v-for="(person, index) in people" :key="index">
    {{ person.name }} - {{ index }}
  </li>
  <br/>
  <li v-for="(person, index) in people2" :key="person.id">
    {{ person.name }} - {{ index }}
  </li>
</ul>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup>
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted,ref } from 'vue'
const people = ref([])
people.value.push({ name: 'Evan', age: 34 });
people.value.push({ name: 'Sarah', age: 98 });
people.value.push({ name: 'James', age: 45 });
people.value.push({ name: 'jack', age: 55 });
people.value.push({ name: 'johanness', age: 58 });

const people2 = ref([])
people2.value.push({ id:0, name: 'Evan2', age: 34 });
people2.value.push({ id:1, name: 'Sarah2', age: 98 });
people2.value.push({ id:2, name: 'James2', age: 45 });
people2.value.push({ id:3, name: 'jack2', age: 55 });
people2.value.push({ id:4, name: 'johanness2', age: 58 });

const handleClickComp1 = ()=>{
  people.value.splice(1,1)
}
const handleClickComp2 = ()=>{
  people2.value.splice(1,1)
}
Mathias Conradt
  • 28,420
  • 21
  • 138
  • 192
Amrmsmb
  • 1
  • 27
  • 104
  • 226
  • Does this answer your question? [Why not always use the index as the key in a vue.js for loop?](https://stackoverflow.com/questions/44531510/why-not-always-use-the-index-as-the-key-in-a-vue-js-for-loop) – Fanoflix May 23 '23 at 12:25

0 Answers0