@MeMoJlor

Почему хук мешает повторному появлению компонента?

Доброго вечера. Когда curtain равен true, то секция рендериться. На этой же секции навешан refs, который срабатывает чтобы снова скрыть секцию, путем вызова функции в хуке update. Когда curtain снова true, то cекция не рендериться.
Подозреваю что хук работает не правильно.

Ошибка:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')
at Proxy.updated (CarList.vue?9e02:22)

<template>
	<section v-if='curtain' ref='scroll'>
	</section>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex';
export default {
  name: 'CarList',
  data () {
    return {
    }
  },
  updated() {
    this.$refs.scroll.addEventListener('wheel', this.fadeOut);
  },
    methods: {
    ...mapMutations(['curtainFalse']),
    fadeOut(e) {
      if (e.deltaY < -5 && window.scrollY == 0) {
        this.curtainFalse();
        this.changeBackFalse();
      }
      console.log(this.curtain);
    }

  },
  computed: {
  	...mapGetters(['curtain']),
  }
}
</script>
  • Вопрос задан
  • 169 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
updated() {
  this.$refs.scroll.addEventListener('wheel', this.fadeOut);
},

Это ещё что за убожество?
Откройте документацию vue, и разберитесь, как правильно подключать обработчики событий к элементам.

Когда условие в v-if ложно, элемента нет. Соответственно, в $refs.scroll вместо ссылки на несуществующий элемент пишется null, и вы пытаетесь обратиться к свойству этого null, чего делать не следует - у null никаких свойств нет и быть не может, подобные обращения заканчиваются ошибками вот как та, что получили вы.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы