I am working on a vuejs cli project where I am trying to display images in the order of @mouseover events and link them with IDs, but for some reason it is not recognizing the image.
export default {
data() {
return {
cart: 0,
imagestitle: "cat",
images: "./socks_green.jpg",
variants: [
{ id: 1, color: "green", image: "../assets/images/socks_green.jpg" },
{ id: 2, color: "blue", image: "../assets/images/socks_blue.jpg" },
{ id: 3, color: "blue", image: "../assets/images/socks_blue.jpg" },
{ id: 4, color: "blue", image: "../assets/images/socks_blue.jpg" },
{ id: 5, color: "blue", image: "../assets/images/socks_blue.jpg" },
{ id: 6, color: "blue", image: "../assets/images/socks_blue.jpg" },
],
};
}, methods: {
updateImage(variantImage) {
this.image = variantImage;
},
},
For example:
<div class="images"></div>
<img :src="images" :alt="imagestitle" />
<div>add<div
v-for="variant in variants"
:key="variant.id"
:mouseover="updateImage(variant.image)"
>
{{ variant.color }}
</div>
<div>{{ cart }}</div>
<button :click="adTo">addd</button>
</div>