VueJS - 在悬停时切换列表项的背景图像

Question

我对 Vue 比较陌生，我想知道我的组件有什么问题，我的 isHover 变量（prop？）无法更改鼠标悬停时的背景。

<template>
  <div class="list-wrap" v-if="gridItems">
    <div
      class="list-itme"
      v-for="(item, index) in gridItems"
      :key="index"
      @click.stop="setCurrentLocation(location)"
    >
      <a
        @mouseover="mouseOver(index)"
        @mouseleave="mouseLeave(index)"
        :style="{
          background: isHover 
            ? `url(${item.location_image.thumbnails.large.url})`
            : `url(${item.location_image.thumbnails.largeHover.url})`
        }"
      >
        {{ item.location_name }}
        {{ isHover }}
      </a>
    </div>
  </div>
</template>

<script>

export default {
  name: "GridItems",
  computed: mapState(["filters", "GridItems"]),
  methods: {
    mouseOver(index) {
      this.item[index].isHover = true;
    },
    mouseLeave(index) {
      this.item[index].isHover = false;
    }
  },
  data() {
    return {
      isHover: false
    };
  }
};
</script>

Answer 1

background: isHover 
        ? `url(${item.location_image.thumbnails.large.url})`
        : `url(${item.location_image.thumbnails.largeHover.url})`

上面的isHover引用了组件的数据属性。

您的 mouseOver() 和 mouseLeave() 方法正在分配一个属性，也称为 this.item[index] 上的 isHover。这是两个完全不同的属性。你从哪里得到 this.item？我没有看到任何道具或它被声明为数据属性。

编辑

您可以在 gridItem 上有一个 isHover 属性。因此，您实际上可以传递 item，而不是将 index 作为参数传递给鼠标事件方法。然后设置item.isHover = true。在样式绑定上，您可以只检查 item.isHover。

这意味着您不需要组件上的 "other" isHover 数据属性。

Answer 2

您的代码中需要考虑一些事项，用于更改元素背景的 isHover 变量是数据属性，但在您的 mouseOver 和 mouseLeave 您正在尝试从名为 item 的数组中的一个元素更改 isHover 属性，该数组未在您发布的代码中声明。另一件需要注意的事情是，没有必要 return mouseOver 和 mouseLeave 方法上的任何内容。

据我了解，您的代码的预期行为是更改您用光标悬停的项目的背景颜色。一些建议，您应该使用 class 绑定而不是向您的模板元素添加内联样式，您也可以在 mouseover 和 mouseleave 处理程序上传递项目而不是索引。另一件要提到的事情是，如果出于某种原因你需要在你的项目上使用 isHover 属性来做其他事情，我只建议这样做，否则你应该只使用 CSS :hover 为了达成这个。我做了一个小演示，这样您就可以了解如何使您的代码正常工作：codepen

编辑

要在将鼠标悬停在某个项目上时更改图像，您应该使用该特定项目的 isHover 属性而不是组件的数据属性 isHover当前正在使用尝试更改图像 url。我更新了 codepen.

VueJS - 在悬停时切换列表项的背景图像

VueJS - toggle background image of list item on hover

vue.js

mouseover