当元素没有id时，v-for使用什么键？
当元素没有id时，v-for使用什么键？
提问于 2019-06-05 02:42:14
在使用v-for时，包含key是strongly recommended。此外，正如here所解释的，使用数组索引作为键并没有真正的帮助。
如果你的元素有一个id属性，那就太好了--你可以把它当做你的键。但是，当元素没有id属性时该怎么办呢？在这种情况下，您应该使用什么作为密钥？
回答 1
Stack Overflow用户
发布于 2019-06-05 02:46:12
更好的解决方案
更好的解决方案是使用外部库从对象的值生成哈希码，并将其用作id。即object-hash
使用object-hash的示例
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) }));
}
}
});<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>
OK解决方案
您可以使用迭代的index作为键，但请记住，如果您按索引更新项，这将不会触发视图上的更改。(Vue使用键来检测更改，因此如果键没有更新，它不会重新呈现模板)
<div v-for="(item, i) in items" :key="i">
// some content.
</div>请注意下面的示例，其中直接按索引更改项不会更新视图，但会将更改打印到控制台：
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')}`);
}
}
});<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56449591
复制相关文章
相似问题