What is the best way to retrieve the color options in the variant using vue js?

Question

What is the best way to retrieve the color options in the variant using vue js?

I'm trying to loop through the variants and retrieve data from the colors array.

I believe my loop code is incorrect

<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 object:

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

Could someone assist me on how to achieve this?

javascript vue.js

Answer 1

Answer №1

Give this a shot.

<div v-for="(item, index) in product.variants" :key="index">
  <p v-for="(innerItem, innerIndex) in item.colors" :key="innerIndex">{{ innerItem.name }}</p>
</div>

Answer 2

Give this a shot.

<div v-for="(item, index) in product.variants" :key="index">
  <p v-for="(innerItem, innerIndex) in item.colors" :key="innerIndex">{{ innerItem.name }}</p>
</div>

Answer 3

Answer №2

Where can I find your product? Also,

There is an issue with the curly braces in

v-for="{items, index} in product.variants"

. It should be replaced with normal parentheses.

Here is a corrected example:

<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>

Answer 4

Where can I find your product? Also,

There is an issue with the curly braces in

v-for="{items, index} in product.variants"

. It should be replaced with normal parentheses.

Here is a corrected example:

<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>

What is the best way to retrieve the color options in the variant using vue js?

Answer №1

Answer №2

Similar questions

Rails link_to using remote true property not refreshing the view

You cannot access the property 'subscribe' on a void type in Angular 2

A step-by-step guide on how to deserialize a C# object in JavaScript

Is there a way to access the value stored in a URL parameter if xmlhttp.status shows 500 error?

resolve CORs issue with api in express app.get( ' /* ')

Get the MAC address of a client using Node.js

Anticipating the execution of pool.query within a callback function in the Express framework

Utilizing Visuals from a Vue Component Collection

Utilizing Angular to Toggle Visibility with Button Directives

What is the proper way to retrieve the value of the key "order" from this JSON object (containing semicolons in the name)?

Another option instead of using jQuery to retrieve the active element in the

Enhancing Accessibility of the 'Return to Top' Link

Connect a responsive div to a main div

Important notice: Warning for stand-alone React 18 page regarding the import of createRoot from "react-dom"

Can a MS Teams Bot be triggered to show a botMessagePreview from a task or submit activity rather than a composeExtension or submitAction activity?

Enhance Your Jekyll Site with the Minimal Mistakes Theme Plugin

Tips for adding up data tables in CodeIgniter

Using conditional statements in a forEach iteration

Accessing AngularJS variable scope outside of a function

Configuring Proxy Settings for WebpackDevServer