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引用了组件的data属性。

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

编辑

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

这意味着您不需要组件上的“其他”isHover 数据属性。

Answer 2

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

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

编辑

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