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

本教程将介绍Nuxt如何在数组上循环并使用v-for正确显示数据的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

我有一个电子商务站点，我想循环来自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"]",

感谢您的帮助。

推荐答案

有这种代码不太好。

<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

好了关于Nuxt怎么在数组上循环并使用v-for正确显示数据的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。