Nuxt how to loop on an array and display the data properly with a 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正确显示数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Nuxt如何在数组上循环并使用v-for正确显示数据
基础教程推荐
- 我什么时候应该在导入时使用方括号 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 动态更新多个选择框 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06