Nuxt3组件Props模板显示正常，Setup脚本仅读取首个数据求助

常见原因及对应修复方案 #

1. 父组件v-for未绑定唯一key #

Vue的v-for默认会复用组件实例，若未给每个子组件指定唯一的:key，可能导致组件内部状态未正确更新，出现模板显示正常但方法中获取旧值的情况。

修复：
在父组件的v-for循环中添加唯一key，优先使用数据的唯一标识（如id）：

<!-- 父组件模板 -->
<FileItem 
  v-for="item in fileList" 
  :key="item.id" <!-- 必须绑定唯一key -->
  :my-file-item="item"
/>

2. 子组件错误解构props导致响应式丢失 #

如果在子组件中直接解构defineProps返回的对象，会失去响应式绑定，导致方法中获取的始终是初始props值。

错误示例：

<script setup>
// 错误：解构后myFileItem失去响应式，不会随props更新
const { myFileItem } = defineProps({
  myFileItem: { type: Object, required: true }
})

const approve = () => {
  console.log(myFileItem) // 始终打印初始值
}
</script>

修复方案1：直接使用props对象
保持对props响应式对象的引用，每次访问都取最新值：

<script setup>
const props = defineProps({
  myFileItem: { type: Object, required: true }
})

const approve = () => {
  console.log(props.myFileItem) // 获取当前最新的props值
}
</script>

修复方案2：使用toRefs保持响应式
如果需要解构，用toRefs将props转为响应式ref对象：

<script setup>
import { toRefs } from 'vue'

const props = defineProps({
  myFileItem: { type: Object, required: true }
})
const { myFileItem } = toRefs(props) // 转为ref对象

const approve = () => {
  console.log(myFileItem.value) // 访问ref的value属性获取最新值
}
</script>

3. 子组件缓存了初始props值 #

如果在setup函数顶部将props值赋值给普通变量，该变量不会随props更新：

错误示例：

<script setup>
const props = defineProps({
  myFileItem: { type: Object, required: true }
})
// 错误：仅初始化时赋值，后续props更新不会同步
const currentFile = props.myFileItem

const approve = () => {
  console.log(currentFile) // 始终打印初始值
}
</script>

修复：
如果需要缓存，使用computed创建响应式计算属性：

<script setup>
import { computed } from 'vue'

const props = defineProps({
  myFileItem: { type: Object, required: true }
})
const currentFile = computed(() => props.myFileItem) // 响应式同步props变化

const approve = () => {
  console.log(currentFile.value)
}
</script>

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