Vue CLI中图片属性绑定失效，鼠标悬停切换图片功能异常求助

问题排查与修复步骤 #

• 事件绑定语法错误：模板里用了:mouseover，这是属性绑定语法，不是事件绑定。Vue中绑定事件必须用@mouseover（或v-on:mouseover）。另外直接写updateImage(variant.image)会在页面渲染时立即执行方法，而非鼠标悬停时触发，要保持原写法即可（Vue会自动处理为事件触发时执行）。
• 数据变量名不匹配：data里定义的图片变量是images，但updateImage方法里更新的是this.image（少了末尾的s），导致数据无法同步到模板，图片自然不会切换。
• Vue CLI图片路径问题：Vue CLI项目中assets目录下的资源，建议用~@/assets/的写法（@是src目录的别名），避免相对路径在打包后出现资源找不到的问题。
• 模板结构语法错误：原模板存在div嵌套不闭合的问题，会导致DOM结构混乱，影响事件触发。

修正后的完整代码 #

脚本部分 #

export default {
  data() {
    return {
      cart: 0,
      imagestitle: "cat",
      images: "@/assets/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.images = variantImage;
    },
    addToCart() {
      this.cart++;
    },
  },
};

模板部分 #

<div class="images">
  <img :src="images" :alt="imagestitle" />
  <div>
    add
    <div
      v-for="variant in variants"
      :key="variant.id"
      @mouseover="updateImage(variant.image)"
    >
      {{ variant.color }}
    </div>
  </div>
  <div>{{ cart }}</div>
  <button @click="addToCart">add</button>
</div>

内容的提问来源于stack exchange，提问作者Ömer Düzgün