[Vuejs]-How Can I import json data in Vue Js with axios

1👍

This is because of 3 reasons.

1) your json is invalid

try this

    {
    "variants": [
      {
        "variantId": 501,
        "variantImage": "assets/images/demo_watch_1.png",
        "variantname": "alpha",
        "typeslug": "men",
        "dialname": "26.5x28.5",
        "items": [
          {
            "itemId": 1,
            "itemimage": "assets/images/demo_watch_2.png",
            "itemcolour": "gold"
          },
          {
            "itemId": 2,
            "itemimage": "assets/images/demo_watch_4.png",
            "itemcolour": "pink"
          },
          {
            "itemId": 3,
            "itemimage": "assets/images/demo_watch_1.png",
            "itemcolour": "black"
          }
        ]
      },
      {
        "variantId": 502,
        "variantImage": "assets/images/demo_watch_2.png",
        "variantname": "alpha",
        "typeslug": "women",
        "dialname": "35",
        "items": [
          {
            "itemId": 1,
            "itemimage": "assets/images/demo_watch_2.png",
            "itemcolour": "gold"
          },
          {
            "itemId": 2,
            "itemimage": "assets/images/demo_watch_4.png",
            "itemcolour": "pink"
          },
          {
            "itemId": 3,
            "itemimage": "assets/images/demo_watch_1.png",
            "itemcolour": "black"
          }
        ]
      }
    ]
  }

2) You use different variable in HTML and javascript file , both should be same

 <div v-for="(variant,variantIndex) in Variants" :key="variant.variantId" class="col-lg-4 col-4 p-5">
            <p>{{variant.variantImage}}</p>
        </div>



new Vue({

    el: '#Products',

    data() {
        return {
            Variants: []
        }
    },
    mounted() {
        axios
            .get('./products.json')
            .then(response => {
                this.Variants = response.data.variants

            })
            .catch((e) => {
                console.error(e)
            })
    }

});

3) you dont need to put vue instance in a variable watchslider

👤Anis

0👍

You’re missing the delimiters {{ }} in your markup for your data binding.

You’ll need to change this line,

<p>{{ variant.variantImage }}</p>

Leave a comment