Ключевое значение v-for в Vue
Когда vue использует v-for, если нет уникального идентификатора, возвращаемого бэкендом, я часто использую индекс вместо уникального идентификатора. Раньше я не находил никаких проблем. Изучив исходный код, я знаю, что это может привести к тому, что vue компонент не подлежит обновлению, но Спустя такое долгое время я до сих пор не сталкивался с проблемой здесь, поэтому я до сих пор пишу так.
родительский компонент:
<template>
<div class="dataPreview">
<div style="width: 100%; background-color: rgb(0 0 0 / 60%)">
<div class="indexContainer">
<div class="dataContainer">
<div class="preview">
<DataShowContent v-for="(item,index) in show" :key="index" :msg="item" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import DataShowContent from './DataShowContent.vue';
export default {
name: 'DataShow',
components: {
DataShowContent
},
data() {
return {
show: [
{
num: '0'
},
{
num: '0'
},
{
num: '0'
},
{
num: '0'
}
]
};
},
mounted() {
this.getMsg();
},
methods: {
async getMsg() {
this.show[2].num = 1;
}
}
};
</script>
Сборка:
<template>
<div class="previewList">
<span class="icon">
<i :class="msg.ico" style="color: rgb(51 170 238);line-height: 70px"></i>
</span>
<h2 class="timer count-title" data-to="965" data-speed="1500">
{
{ num }}
</h2>
<p>{
{ message.name }}</p>
</div>
</template>
<script>
export default {
name: 'DataShowContent',
props: ['msg'],
mounted() {
this.getNum();
},
methods: {
getNum() {
console.log(this.msg.num);
}
}
};
</script>
В приведенном выше коде я обнаружил, что функция getNum в дочернем компоненте выводит 0 только один раз, указывая на то, что когда значение в родительском компоненте обновляется, оно не обнаруживается в дочернем компоненте, поэтому обновления нет. проблема использования индекса в качестве ключа. Поэтому я использовал библиотеку nanoid для улучшения.
наноид
//npm i nanoid,安装nanoid
import {nanoid} from 'nanoid';//引入nanoid
nanoid();//nanoid的使用
Код родительского компонента улучшен следующим образом.
<template>
<div class="dataPreview">
<div style="width: 100%; background-color: rgb(0 0 0 / 60%)">
<div class="indexContainer">
<div class="dataContainer">
<div class="preview">
<DataShowContent v-for="item in show" :key="index.key" :msg="item" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
import DataShowContent from './DataShowContent.vue';
export default {
name: 'DataShow',
components: {
DataShowContent
},
data() {
return {
show: [
{
num: '0',
key: nanoid()
},
{
num: '0',
key: nanoid()
},
{
num: '0',
key: nanoid()
},
{
num: '0',
key: nanoid()
}
]
};
},
mounted() {
this.getMsg();
},
methods: {
async getMsg() {
this.show[2].key = nanoid();
this.show[2].num = 1;
}
}
};
</script>