web-dev-qa-db-ja.com

vue.js forループのキーとして常にインデックスを使用しないのはなぜですか？

いくつかのプロジェクトでvue.jsを使用しており、forループのキーとしてインデックスを使用しています

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

...そして例では通常アイテムのIDを使用しているので、それに問題があるかどうか疑問になり始めました。

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

なぜなら、配列はmutableだからです。任意のアイテムのインデックスは、アイテムが配列に追加されたり、配列から削除されたりすると、changeできます。

keyを、一意のコンポーネントのみを識別する一意の値にする必要があります。作成する主キーは、常にインデックスを使用するよりも優れています。

例を示します。

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>

addValueをクリックすると、上部のリストはtrulyが配列にある配列の新しい数値を表します。途中で。ボタンの下の2番目のリストでは、値はnotで配列内の実際の場所を表し、内部およびプロパティ値は同意しない同意する。

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>

より明確にするために

0
user3598155