Vue3中‘Property "item"未定义’渲染错误的排查与解决

第一个错误："Property 'item' was accessed during render but is not defined on instance" #

原因：ParentComponent里的v-for指令多写了绑定符号:，导致指令直接失效，模板根本识别不了循环变量item，自然会报未定义的错。
修复方法：把:v-for改成v-for，同时补上Vue要求的循环key。

第二个错误："Elements in iteration expect to have 'v-bind:key' directives" #

原因：Vue强制要求列表循环的元素必须绑定唯一key，用来跟踪元素身份，避免渲染混乱。
修复方法：给v-for所在元素加上:key，优先用数据里的唯一标识（比如每个商品的id），如果数据里没有唯一id，临时用索引index也可以（但不推荐，数据顺序变化时容易出问题）。

修复后的完整ParentComponent.vue #

<template>
  <div class="homescreen">
    <h2 class="homescreen_title">Latest Products</h2>
    <!-- 修正v-for写法，添加key -->
    <div class="homescreen_products" v-for="item in items" :key="item.id">
      <ChildComponent :description="item.description" />
    </div>
  </div>
</template>

<script setup>
import ChildComponent from "../ChildComponent/ChildComponent.vue";
import { useStore } from "vuex";
import { computed } from "vue";

const store = useStore();

const getProducts = async () => {
  await store.dispatch("getAllProducts");
};

getProducts();

const items = computed(() => store.getters.getProducts);
</script>

额外说明 #

你担心的异步请求未完成就渲染的问题其实不用额外处理：items是响应式的computed属性，初始时productsArray是空数组，v-for遍历空数组不会渲染任何内容，等接口返回数据后store更新，computed会自动触发重新渲染，完全符合预期。之前测试{{items}}能正常显示，也说明数据链路是通的，只是v-for的写法错误导致循环没生效。

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