How to loop on an array and display the data properly with a v-for?

Question

I have an e-commerce site, I want to loop the nested data from json. I tried many things but couldn't find.

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

I use like this;

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

My json Data is : "sizes": "[\"XS\",\"S\",\"M\",\"L\"]",

thanks for helping.

Hi, I think you need to use it like v-for="(index, size) in post.sizes" and then access {{ size }}. Also if this does not help then can you share the whole component how you are using it and also the whole jsonData structure. — Yash Maheshwari
– Yash Maheshwari, Commented Jun 19, 2021 at 10:19
I think your code should be something like this <li v-for="(size, index) in sizes" :key="index"> {{ size }}</li> — Hassan Imam
– Hassan Imam, Commented Jun 19, 2021 at 10:20

kissu · Accepted Answer · 2024-10-23 07:07:57Z

6

Having this kind of code is not really okay.

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

You need to update your data to something like this

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

Or even better, fetch some ids from an API and then, use it like this

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

Having a mutable index is not something that you should use for :key since it's does the opposite of what is is supposed to do.

answered Jun 21, 2021 at 8:54

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1