Nuxt 如何在数组上循环并使用 v-for 正确显示数据

Posted 2023-02-22

【中文标题】Nuxt 如何在数组上循环并使用 v-for 正确显示数据

【英文标题】：Nuxt how to loop on an array and display the data properly with a v-for

【发布时间】：2021-09-03 19:34:16

【问题描述】：

我有一个电子商务网站，我想从 json 循环嵌套数据。我尝试了很多东西，但找不到。

async fetch() 
    this.post = await fetch(
      `http://test.com/api.php?id=$this.$route.params.id`
    ).then((res) => res.json())
  

我是这样用的；

<h3> post.title </h3>
<li v-for="(index, post.sizes) in sizes" :key="index">
         sizes.index 
      </li>

我的 json 数据是："sizes": "[\"XS\",\"S\",\"M\",\"L\"]",

感谢您的帮助。

【问题讨论】：

您好，我认为您需要像v-for="(index, size) in post.sizes" 一样使用它，然后访问 size 。此外，如果这没有帮助，那么您能否分享整个组件的使用方式以及整个 jsonData 结构。

我认为你的代码应该是这样的<li v-for="(size, index) in sizes" :key="index"> size </li>

【参考方案1】：

有这种代码真的不行。

<li v-for="(size, index) in sizes" :key="index">
   size 
</li>

您需要将数据更新为类似的内容

sizes: [
   id: 1, name: "XS" ,
   id: 2, name: "S" ,
   id: 3, name: "M" ,
   id: 4, name: "L" ,
]

或者更好的是，从 API 中获取一些 id，然后像这样使用它

<li v-for="size in sizes" :key="side.id">
   size.name 
</li>

拥有一个可变的index 不应该用于:key，因为它与应该做的相反。

---

:key 是必不可少的，更多信息在这里：https://vuejs.org/v2/style-guide/#Keyed-v-for-essential

这里有一篇博客文章对此进行了解释：https://michaelnthiessen.com/understanding-the-key-attribute#dont-use-an-index-as-the-key