Vue.js中使用v-for无法渲染JSON的products数组问题求助

你的代码存在一个核心问题：mounted生命周期钩子被错误地放在了methods对象内部，导致页面挂载时不会调用getData方法，自然无法获取数据并渲染。

修正后的完整代码 #

模板部分

<div class="box" v-for="product in products" :key="product.id">
  <h2>Produto {{ product.name }}</h2>
  <h3>Situação {{ product.situation }}</h3>
</div>

脚本部分

export default {
  data() {
    return {
      products: [],
    };
  },
  // mounted需与methods同级，不能嵌套在methods里
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const req = await fetch("http://localhost:3000/products");
        const data = await req.json();
        this.products = data.products;
        // 正确打印数据，方便排查结构是否符合预期
        console.log("获取到的数据:", data);
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
  },
};

额外排查点 #

• 检查浏览器控制台是否有报错，比如跨域问题（前后端端口不同时，需在后端配置CORS）
• 确认http://localhost:3000/products接口能正常返回你提供的JSON数据
• 确保模板中使用的属性名（name、situation）和返回的JSON数据属性完全匹配

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