In my vuejs cli application I want to show the images in order of @mouseover and I want to link them with id and show them but it is not detecting the imag

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;
        },
    },

examples like this

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

enter image description here

CodePudding user response：

Just keep the name of the image with slash in List like : { id: 1, color: "green", image: "/socks_green" }.

In template: <img :src="../assets/images${images}.jpg" :alt="imagestitle" />

or you can try moving all the images in static folder and use them like :

<img :src="${images}.jpg" :alt="imagestitle" />

CodePudding user response：

Checkout the below code which should work for you. No need of methods for changing the image on mouseover effect.

1. Take a variable imageIndex in data()
2. Next, on mouseover, assign the index of your v-for to the imageIndex variable
3. In the img tag, place a condition in :src which works as if the imageIndex is null then it will use the value of images and if not then it will use the image from the variants array by using the variants[imageIndex].image.
4. On mouseleave, the imageIndex will again set to null. (this is an additional code I have added, you can remove that line if you don't need to change the image back to default on mouseleave)

HTML:

<div ></div>
  <img :src="imageIndex !== null ? variants[imageIndex].image : images" :alt="imagestitle" />
    <div
      v-for="(variant, index) in variants"
      :key="variant.id"
      @mouseover="imageIndex = index"
      @mouseleave="imageIndex = null"
    >
       {{ variant.color }}
    </div>

    <div>{{ cart }}</div>

    <button @click="adTo">addd</button>
</div>

JavaScript:

data() {
  return {
      imageIndex: null,
      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" },
      ],
   };
},