Nuxt3中Props数据变更后页面无法实时更新问题求助

问题原因及修复步骤 #

1. 替换v-for的key值 #

你当前用index作为v-for的key，这会导致数组元素顺序/内容变化时，Vue无法正确识别哪些DOM需要更新。必须使用每个item的唯一标识，比如datae.username（如果username是唯一的，有id字段用id更稳妥）：

修改模板中的tr标签：

<tr v-for="(datae, index) in props.ranking" :key="datae.username">

2. 给watch添加深度监听 #

当前的watch只监听数组的引用变化，如果父组件是修改数组内部元素的属性，而不是替换整个数组，watch不会触发。需要开启deep: true来监听数组内部的变化：

修改子组件的watch代码：

watch(() => props.ranking, (newValue, oldValue) => {
  console.log('数组变化了', newValue);
}, { deep: true })

3. 确保父组件修改数组的方式符合Vue响应式规则 #

Vue对数组的响应式有限制，以下写法不会触发更新：

// ❌ 错误：直接通过索引修改元素属性
this.ranking[0].blank = 5;
// ❌ 错误：直接修改数组长度
this.ranking.length = 0;

必须用以下方式修改数组：

// ✅ 正确：使用Vue.set修改元素属性
this.$set(this.ranking[0], 'blank', 5);

// ✅ 正确：使用数组方法（push/splice/shift等）
this.ranking.splice(0, 1, { ...this.ranking[0], blank: 5 });

// ✅ 正确：替换整个数组（触发引用变化）
this.ranking = [...this.ranking]; // 浅拷贝数组，生成新引用

验证 #

修改完成后，当父组件更新ranking数组时，子组件的表格应该会自动渲染最新数据，同时watch的console.log也会触发。

内容的提问来源于stack exchange，提问作者Ardya Reyhan