如何访问变体中的颜色？ 在 Vue.js 中

Question

I want to loop the variant , and also want to get data from colors

i think my loop code was wrong

<span v-for="{items, index} in product.variants" :key="index">
  <em v-for="(item, index) in items.colors" :key="index">{{ item.name }}</em>
</span>

this is my json

"variants": [
    {
     "size": "39",
     "colors": [
        {
          "name": "Red",
          "stock": 2
        },
        {
        "name": "Black",
        "stock": 1
        }
      ]
    },
    {
     "size": "39",
     "colors": [
        {
          "name": "Red",
          "stock": 2
        },
        {
          "name": "Black",
          "stock": 1
        }
      ]
    }
  ]

can you help me how to do that?

Answer 1

Try this.

<span v-for="(item1, index1) in product.variants" :key="index1">
  <em v-for="(item2, index2) in item1.colors" :key="index2">{{ item2.name }}</em>
</span>

Answer 2

Where is your product? and

Curly braces are wrong in v-for="{items, index} in product.variants" . It should be normal parentheses.

The following works:

<template>
  <div>
    <span v-for="(items, index) in product.variants" :key="index">
    <em v-for="(item, index) in items.colors" :key="index">{{ item.name }}</em>
    </span>
  </div>
</template>

<script>
export default {
  data(){
    return {
      product: {
        variants: [
          {
            "size": "39",
            "colors": [
              {
                "name": "Red",
                "stock": 2
              },
              {
                "name": "Black",
                "stock": 1
              }
            ]
          },
          {
            "size": "39",
            "colors": [
              {
                "name": "Red",
                "stock": 2
              },
              {
                "name": "Black",
                "stock": 1
              }
            ]
          }
        ]
      }
    }
  }
}
</script>