[Vuejs]-Stuck while going through this array in VueJS

by

1👍

✅

With your data structure edited, it can look like this

<template>
  <div>
    <div v-for="{ inStock, Brand: { name, id } } in carStore" :key="id">
      <span>{{ name }}: {{ inStock }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carStore: [
        {
          Brand: {
            id: 1,
            name: 'some name',
          },
          inStock: 50,
        },

        {
          Brand: {
            id: 2,
            name: 'some name',
          },
          inStock: 100,
        },

        {
          Brand: {
            id: 3,
            name: 'some name',
          },
          inStock: 0,
        },
      ],
    }
  },
}
</script>

-1👍

If you are allowed to change the data structure, I would recommend you do like this:

"carStore":[
   {
      "id":1,
      "name":"some name",
      "inStock":50
   },
   {
      "id":2,
      "name":"some name",
      "inStock":100
   },
   {
      "id":3,
      "name":"some name",
      "inStock":0
   }
]

Then you can iterate in Vue like this:

<div v-for="(item, key) in carStore" :key="key">
    id:  {{item.id}} - name: {{item.name}} - instock: {{item.inStock}}
</div>

Leave a comment