I am doing attribute binding in vue js image but it is not working

user_19494748 0
Viewed 39

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

enter image description here

vue.js arrays javascript
2 Answers

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 class="images"></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" },
      ],
   };
},
user_100577040

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

user_151646030
Related