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>
Source:stackexchange.com