VueJS - переключать фоновое изображение элемента списка при наведении - PullRequest
Новая
       5

VueJS - переключать фоновое изображение элемента списка при наведении

0 голосов
/ 25 января 2020

Я относительно новичок в 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>

Ответы [ 2 ]

0 голосов
/ 25 января 2020

В вашем коде есть несколько вещей, которые нужно учитывать, переменная isHover, которая используется для изменения фона ваших элементов, является свойством данных, но в ваших mouseOver и mouseLeave вы пытаетесь изменить свойство isHover элемента массива с именем item, которое не объявлено в опубликованном вами коде. Следует также отметить, что нет необходимости возвращать что-либо в ваши методы mouseOver и mouseLeave.

Как я понимаю, ожидаемое поведение вашего кода - изменение цвета фона элемента, который вы наводите курсором. Пара предложений: вы должны использовать привязку классов вместо добавления встроенных стилей к элементам шаблона, также вы можете передать элемент вместо индекса в обработчиках mouseover и mouseleave. Следует также упомянуть, что я бы рекомендовал делать это только в том случае, если по какой-то причине вам нужно свойство isHover вашего элемента для чего-то другого, в противном случае вам просто нужно использовать CSS :hover для достижения этой цели. Я сделал небольшую демонстрацию, чтобы вы могли посмотреть, что можно сделать, чтобы ваш код работал: codepen

Редактировать

Изменить изображение при наведении курсора на элемент, вы должны использовать свойство isHover этого конкретного элемента вместо свойства данных компонента isHover, которое вы в настоящее время используете, чтобы попытаться изменить URL-адрес изображения. Я обновил свой кодекс .

0 голосов
/ 25 января 2020 
background: isHover 
        ? `url(${item.location_image.thumbnails.large.url})`
        : `url(${item.location_image.thumbnails.largeHover.url})`

Приведенное выше isHover ссылается на свойство данных компонента.

Ваши методы mouseOver() и mouseLeave() назначают свойство, также называемое isHover для this.item[index]. Это два совершенно разных свойства. Откуда вы получаете this.item от? Я не вижу никаких реквизитов или они объявляются как атрибут данных.

Редактировать

Вы можете иметь свойство isHover в gridItem. Поэтому вместо передачи index в качестве аргумента в методы событий мыши вы можете фактически передать item. Затем просто установите item.isHover = true. На привязку стиля вы можете просто проверить против item.isHover.

Это означает, что вам не нужно "другое" isHover свойство данных для компонента.

...