blocks|key|1600682|text|更好的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1600683|更好的解决方案是使用外部库从对象的值生成哈希码，并将其用作id。即object-hash|offset|length|1600684|使用object-hash的示例|style|CODE|1600685|​|1600686|const+hash+=+objectHash;+//+this+should+be+the+import+i.e.+require('object-hash');

new+Vue({
++el:+'#app',
++template:+`
++<div>
++++<p+v-for="item+in+itemsWithHash"+:key="item.key">
++++++{{item.name}}+{{item.lastname}}<br>key:+{{+item.key+}}
++++</p>
++</div>
++`,
++data:+()+=>+({
++++items:+[
++++++{+name:+'john',+lastname:+'doe'+},
++++++{+name:+'bob',+lastname:+'smith'+},
++++++{+name:+'alice',+lastname:+'james'+}
++++]
++}),
++computed:+{
++++itemsWithHash()+{
++++++return+this.items.map(i+=>+({+...i,+key:+hash(i)+}));
++++}
++}
});|code-block|syntax|javascript|1600687|<script+src="https://cdn.jsdelivr.net/npm/object-hash@1.3.1/dist/object_hash.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div+id="app"></div>|1600688|1600689|OK解决方案|1600690|您可以使用迭代的index作为键，但请记住，如果您按索引更新项，这将不会触发视图上的更改。(Vue使用键来检测更改，因此如果键没有更新，它不会重新呈现模板)|1600691|<div+v-for="(item,+i)+in+items"+:key="i">
++++//+some+content.
</div>|1600692|请注意下面的示例，其中直接按索引更改项不会更新视图，但会将更改打印到控制台：|1600693|1600694|new+Vue({
++el:+'#app',
++template:+`
++<div>
++++<p+v-for="(item,+index)+in+items"+:key="index">
++++++{{item.name}}+{{item.lastname}}<br>index:+{{+index+}}
++++++<button+@click="changeForMary(index)">+Replace+with+Mary+Smith</button>
++++</p>
++</div>
++`,
++data:+()+=>+({
++++items:+[
++++++{+name:+'john',+lastname:+'doe'+},
++++++{+name:+'bob',+lastname:+'smith'+},
++++++{+name:+'alice',+lastname:+'james'+}
++++]
++}),
++methods:+{
++++changeForMary(index){
++++++this.items[index]+=+{+name:+'mary',+lastname:+'smith'+};
++++++console.log(`index+${index}+changed+to+${JSON.stringify(this.items[index],+null,+'\t')}`);
++++}
++}
});|1600695|<script+src="https://cdn.jsdelivr.net/npm/object-hash@1.3.1/dist/object_hash.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div+id="app"></div>|1600696|1600697|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/object-hash^0|0|X|B|0|0|2|B|0|0|0|0|0|0|8|5|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|F|3|G|5|6|7|1K|8|@$D|1L|E|1M|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1N|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1O|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1P|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1R|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1S|8|@$D|1T|E|1U|H|I]]|9|@]|A|$]]|$1|X|3|Y|5|N|7|1V|8|@]|9|@]|A|$O|P]]|$1|Z|3|10|5|6|7|1W|8|@]|9|@]|A|$]]|$1|11|3|K|5|6|7|1X|8|@]|9|@]|A|$]]|$1|12|3|13|5|N|7|1Y|8|@]|9|@]|A|$O|P]]|$1|14|3|15|5|N|7|1Z|8|@]|9|@]|A|$O|P]]|$1|16|3|K|5|6|7|20|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]]]

<h2>Better solution</h2>

<p>A better solution would be to use an external library to generate a hashcode from the value of your object and use that as an id. i.e. <a href="https://www.npmjs.com/package/object-hash" rel="nofollow noreferrer">object-hash</a></p>

<p>An example using <code>object-hash</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const hash = objectHash; // this should be the import i.e. require('object-hash');

new Vue({
  el: '#app',
  template: `
  &lt;div&gt;
    &lt;p v-for="item in itemsWithHash" :key="item.key"&gt;
      {{item.name}} {{item.lastname}}&lt;br&gt;key: {{ item.key }}
    &lt;/p&gt;
  &lt;/div&gt;
  `,
  data: () =&gt; ({
    items: [
      { name: 'john', lastname: 'doe' },
      { name: 'bob', lastname: 'smith' },
      { name: 'alice', lastname: 'james' }
    ]
  }),
  computed: {
    itemsWithHash() {
      return this.items.map(i =&gt; ({ ...i, key: hash(i) }));
    }
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/object-hash@1.3.1/dist/object_hash.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<h2>OK Solution</h2>

<p>You can use the <code>index</code> of the iteration as a key, but keep in mind that this will not trigger changes on the view if you update the item by index. (Vue uses the key to detect changes, so it wont re-render the template if the key is not updated)</p>

<pre><code>&lt;div v-for="(item, i) in items" :key="i"&gt;
    // some content.
&lt;/div&gt;
</code></pre>

<p>Note the example below where mutating the items directly by index does not update the view but prints the change to the console:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
  el: '#app',
  template: `
  &lt;div&gt;
    &lt;p v-for="(item, index) in items" :key="index"&gt;
      {{item.name}} {{item.lastname}}&lt;br&gt;index: {{ index }}
      &lt;button @click="changeForMary(index)"&gt; Replace with Mary Smith&lt;/button&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  `,
  data: () =&gt; ({
    items: [
      { name: 'john', lastname: 'doe' },
      { name: 'bob', lastname: 'smith' },
      { name: 'alice', lastname: 'james' }
    ]
  }),
  methods: {
    changeForMary(index){
      this.items[index] = { name: 'mary', lastname: 'smith' };
      console.log(`index ${index} changed to ${JSON.stringify(this.items[index], null, '\t')}`);
    }
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/object-hash@1.3.1/dist/object_hash.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>When using <code>v-for</code>, it is <a href="https://vuejs.org/v2/style-guide/#Keyed-v-for-essential" rel="nofollow noreferrer">strongly recommended</a> to include a <code>key</code>. Furthermore, as explained <a href="https://rimdev.io/the-v-for-key/" rel="nofollow noreferrer">here</a>, using the array index as your key doesn't really help.</p>

<p>If your elements have an <code>id</code> property, then that's great - you could just use that as your key. But what about when your elements <em>don't</em> have an <code>id</code> property? What should you use as your key in that scenario?</p>


What key to use for v-for when elements have no id?

JSON

在使用v-for时，包含key是。此外，正如所解释的，使用数组索引作为键并没有真正的帮助。如果你的元素有一个id属性，那就太好了--你可以把它当做你的键。但是，当元素没有id属性时该怎么办呢？在这种情况下，您应该使用什么作为密钥？

问当元素没有id时，v-for使用什么键？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当元素没有id时，v-for使用什么键？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当元素没有id时，v-for使用什么键？
EN