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

Question

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

感谢您的帮助。

Answer 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因为它的作用与应该做的相反。