Below is the JSON data containing button names and their corresponding image URLs:
buttonDetails= [ {
"name": "button1",
"images": [{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
},
{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
},
{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
}
]
},
{
"name": "button2",
"images": [{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
},
{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
},
{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
}
]},
{
"name": "button3",
"images": [{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
},
{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
},
{
"url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
}
]
}]
The following template code displays all buttons and images associated with button1 upon page load:
<template>
<ul class="images-list" v-for="(button,index) in buttonDetails" v-if="index == button1">
<li v-for="image in button.images" v-if="image.style=='750WX750H'">
<img :src="image.url" alt="" @click="zoom1 = true" @mousemove="moveBG">
<div class="image-hover" :style="{ backgroundImage: 'url(' + image.url + ')' }"></div>
<modal v-model="zoom1" class="image-zoom">
<div>
<img :src="image.url" :style="{transform:'translateY(' + translateY + 'px)'}" @mousemove.self="onMouseMove($event)">
</div>
</modal>
</li>
</ul>
<ul class="button-list">
<li v-for="button of this.buttonDetails">{{button.name}}</a></li>
</ul>
</template>
Whenever a button is clicked, the image source should change based on the JSON data stored in the Buttondetails variable. Can you provide guidance on how to achieve this functionality?
Each button displayed below has its own set of associated images, and only one button can be active at a time along with its images. Assistance in implementing this feature would be greatly appreciated.