[英]How to treat each element as single over array in Vuejs
I have an array of products, I want to change the element src only on the one I'm hovering on.我有一系列产品,我只想在我悬停的那个上更改元素 src。 If there is a way of doing it in Vuejs I would like to know.
如果有办法在 Vuejs 中做到这一点,我想知道。 My code so far
到目前为止我的代码
<div class="swiper-slide" v-for="(prodotto,index) in prodotti" :key="prodotto.title">
<img @mouseover="swapImage(index)" @mouseleave="swapImageLeave" class="swiper-lazy ima-prodotto" :key="index" :src=" hoverProdotti === 1 ? prodotto.images[0] : prodotto.images[1]" v-
bind:alt="prodotto.title">
</div>
const app = new Vue({
el: "#root",
data: {
hoverProdotti:0,
},
methods: {
swapImage: function(index) {
console.log(index)
this.hoverProdotti = 1
},
swapImageLeave: function() {
this.hoverProdotti = 0
},
You can simply achieve this by adding a hoverProdotti
property in each object of prodotti
array with default value as false
.您可以通过在
prodotti
数组的每个对象中添加一个hoverProdotti
属性来简单地实现这一点,默认值为false
。 The reason behind this is that it should be dynamic to implement the swap logic only for the specific hover
image not for all images.这背后的原因是,只为特定
hover
图像而不是所有图像实现交换逻辑应该是动态的。
Live Demo :现场演示:
new Vue({ el: '#app', data: { prodotti: [{ title: 'Title 1', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }, { title: 'Title 2', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }, { title: 'Title 3', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }, { title: 'Title 4', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }], }, methods: { swapImage(index) { this.prodotti[index].hoverProdotti = true }, swapImageLeave(index) { this.prodotti[index].hoverProdotti = false } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(prodotto,index) in prodotti" :key="prodotto.title"> <img @mouseover="swapImage(index)" @mouseleave="swapImageLeave(index)" :key="index" :src="prodotto.hoverProdotti ? prodotto.images[0] : prodotto.images[1]" :alt="prodotto.title"> </div> </div>
Assuming that your prodotto.images
is an array with couple of images in it and your requirement is to show the image on the 0th index when hovered and show the image on the 1st index when un-hovered.假设您的
prodotto.images
是一个包含几个图像的数组,并且您的要求是在悬停时在第 0 个索引上显示图像,并在未悬停时在第一个索引上显示图像。
<div class="swiper-slide" v-for="(prodotto,index) in prodotti" :key="prodotto.title">
<img
@mouseover="hoverProdotti = index"
@mouseleave="hoverProdotti = null"
class="swiper-lazy ima-prodotto"
:key="index"
:src="hoverProdotti === index ? prodotto.images[0] : prodotto.images[1]"
:alt="prodotto.title"
/>
</div>
data: {
hoverProdotti:null,
},
Code explanation :代码说明:
Assign 'null' value to hoverProdotti
variable.将“null”值分配给
hoverProdotti
变量。 Inside the v-for
when you mouse over on a specific element, it's index gets assigned to hoverProdotti
, which would fulfill the condition we have placed in :src
.在
v-for
当您将鼠标悬停在特定元素上时,它的索引被分配给hoverProdotti
,这将满足我们在:src
中放置的条件。 And as soon as mouse leaves, hoverProdotti
gets null
value assigned.一旦鼠标离开,
hoverProdotti
就会分配null
值。
With this logic, it will swap images on your mouseover and mouseleave for the all the elements of the array.使用此逻辑,它将在您的 mouseover 和 mouseleave 上为数组的所有元素交换图像。
Note: No need of methods
or any functions
.注意:不需要
methods
或任何functions
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.