En mi aplicación vuejs cli quiero mostrar las imágenes en orden de @mouseover y quiero vincularlas con id y mostrarlas pero no detecta la imagen
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; }, },ejemplos como este
<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>Consulte el siguiente código que debería funcionar para usted. No hay necesidad de métodos para cambiar la imagen en el efecto de mouseover .
imageIndex en data()index de su v-for a la variable imageIndeximg , coloque una condición en :src que funciona como si imageIndex null , luego usará el valor de las images y, si no, usará la imagen de la matriz de variants usando variants[imageIndex].image .imageIndex volverá a establecerse en null . (este es un código adicional que he agregado, puede eliminar esa línea si no necesita cambiar la imagen a su valor predeterminado en 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" }, ], }; },Simplemente mantenga el nombre de la imagen con una barra inclinada en la Lista como: { id: 1, color: "green", image: "/socks_green" }.
En plantilla: <img :src=" ../assets/images${images}.jpg " :alt="imagestitle" />
o puede intentar mover todas las imágenes en una carpeta estática y usarlas como:
<img :src=" ${imágenes}.jpg " :alt="imagestitle" />