如何在Vuejs中将每个元素视为单个数组

Question

我有一个产品数组，我想只在我悬停的那个上更改元素src。如果有办法在Vuejs中做到这一点，我想知道。到目前为止我的代码

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

Answer 1

您只需在prodotti数组的每个对象中添加一个默认值为false的hoverProdotti属性即可实现这一点。这背后的原因是，只为特定的hover图像而不是为所有图像实现交换逻辑应该是动态的。

实时演示：

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>

Answer 2

假设您的prodotto.images是一个包含多个图像的数组，并且您的要求是在悬停时在第0个索引上显示图像，而在未悬停时在第1个索引上显示图像

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

---

代码解释：

将"null"值分配给hoverProdotti变量。在v-for中，当您将鼠标悬停在特定元素上时，它的索引将被分配给hoverProdotti，这将满足我们在:src中设置的条件。鼠标一离开，hoverProdotti就会获得指定的null值。

有了这个逻辑，它将把mouseover和mouseleave上的图像交换为数组的所有元素。

注：不需要methods或任何functions。