web-dev-qa-db-fra.com

Pourquoi ne pas toujours utiliser l'index comme clé dans une boucle vue.js for?

J'ai utilisé vue.js pour quelques projets et j'ai utilisé l'index comme clé dans les boucles for

<div v-for="(item, index) in items" :key="index"></div>

... et ont commencé à se demander s'il y avait des problèmes avec cela, car les exemples utilisent généralement l'ID de l'article.

<div v-for="(item, index) in items" :key="item.ID"></div>
javascriptindexingvue.jskeyv-for
15
getsetbro

Parce que les tableaux sont mutables. L'index d'un élément donné peut et va changer si des éléments sont ajoutés ou supprimés du tableau.

Vous voulez que votre key soit une valeur unique identifiant uniquement votre composant unique. Une clé primaire que vous créez est toujours meilleure que l'utilisation d'un index.

Voici un exemple.

console.clear()

Vue.component("item", {
  props: ["value"],
  data() {
    return {
      internalValue: this.value
    }
  },
  template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>`
})


new Vue({
  el: "#app",
  data: {
    items: [1, 2, 3, 4, 5]
  },
  methods: {
    addValue() {
      this.items.splice(this.items.length / 2, 0, this.items.length + 1)
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  {{items}}
  <ul>
    <item v-for="i in items" :value="i" :key="i"></item>
  </ul>
  <button @click="addValue">AddValue</button>
  <ul>
    <item v-for="(i, index) in items" :value="i" :key="index"></item>
  </ul>
</div>

Notez que lorsque addValue est cliqué, la liste en haut représente les nouveaux nombres dans le tableau où les vraiment sont dans le tableau; au milieu. Dans la deuxième liste sous le bouton, les valeurs ne représentent pas l'emplacement réel dans le tableau et les valeurs internes et de propriété le font pas d'accord.

20
Bert
console.clear()

Vue.component("item", {
  props: ["value"],
  data() {
    return {
      internalValue: this.value
    }
  },
  template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>`
})


new Vue({
  el: "#app",
  data: {
    items: [{name:'a'},{name:'b'},{name:'c'}]
  },
  methods: {
    addValue() {
      this.items = [{name:'a'},{name:6},{name:'b'},{name:'c'}];
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  {{items}}
  <ul>
    <item v-for="i in items" :value="i.name" :key="i"></item>
  </ul>
  <button @click="addValue">AddValue</button>
  <ul>
    <item v-for="(i, index) in items" :value="i.name" :key="index"></item>
  </ul>
</div>

Pour être plus clair

0
user3598155