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 ? '#CA0000' : '#0000CA'
        }"
      >
        {{ item.location_name }}
        {{ isHover }}
      </a>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import state from "../store/index";
import router from "../router";

export default {
  name: "GridItems",
  computed: mapState(["filters", "GridItems"]),
  methods: {
    setCurrentLocation: function(item) {
      this.$emit("setCurrentLocation");
      state.commit("setLocationFromMenu", item.location_name);
      if (this.$route.name !== "grid") {
        router.push({
          path: "/grid",
          query: { item: item.location_name }
        });
      }
    },
    mouseOver(index) {
      return (this.item[index].isHover = true);
    },
    mouseLeave(index) {
      return (this.item[index].isHover = false);
    }
  },
  data() {
    return {
      isHover: false
    };
  }
};
</script>

Answer 1

background: isHover ? '#CA0000' : '#0000CA'

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

您的mouseOver()和mouseLeave()方法正在为isHover分配一个属性，也称为this.item[index]。您从哪里得到this.item？我没有看到任何道具，也没有将其声明为数据属性。

此外，如果您要为属性分配值，则无需返回它。