vue.js - 试图在 vue js 中更改组件的图像，但它触及了整行

Question

所以我试图在组件上的悬停事件上更改 img src。它有效，但由于我使用 v-for，它会更改行中的每个图像而不是一个。这是 main.js 中的代码：

Vue.component("fiche-produit", {
            template: `<div class="col-3">
                            <img v-bind:src="image" width="380px">             
                        </div>`,
            props: ["image"],
            methods: {},
        });
        new Vue({
            el: "#app",
            data: function () {
                return {
                    hover: false,
                    produits: [{
                            id: "1",
                            nom: "",
                            image: "img/coupe-vent-home-menthe.jpg",
                            image2: "img/technique_mente2.jpg",
                            prix: "",
                        },
                        {
                            id: "2",
                            nom: "",
                            image: "img/Bas_de_jogging_technique_menthe1.jpg",
                            image2: "img/Bas_de_jogging_technique_menthe2.jpg",

                            prix: "",
                        },
                        {
                            id: "3",
                            nom: "",
                            image: "img/coupe-vent-home-noir.jpg",
                            image2: "img/coupe-vent-home-noir2.jpg",
                            prix: "",
                        },
                        {
                            id: "4",
                            nom: "",
                            image: "img/bas_technique_noir.jpg",
                            image2: "img/bas_technique_noir2.jpg",
                            prix: "",
                        }
                    ],
                };
            },
        });

这是html代码：

<div id="app">
        <fiche-produit v-for="produit in produits" @mouseover.native="hover = true" @mouseleave.native="hover = false"
            v-bind:image="[hover ? produit.image2 : produit.image]"></fiche-produit>
    </div>

标签： vue.jsvue-componentv-for

Answer 1

您有多个produits但只有一个hover状态变量，由所有这些变量共享。如果您希望每个都有自己的悬停状态，则需要单独的变量。您可以拥有一个hover长度与 相同的数组，也可以produits只为每个数组添加一个hover属性。

例如：

<fiche-produit v-for="produit in produits"
               @mouseover.native="$set(produit, 'hover', true)" 
               @mouseleave.native="$set(produit, 'hover', false)"
               v-bind:image="[produit.hover ? produit.image2 : produit.image]"
               :key="produit.id">
</fiche-produit>