Куда писать «обычные» скрипты во Vue js?

Question

[Андрей]

Добрый вечер. Изучаю Vue js, и у меня появился такой вопрос: куда писать стандартные, всем привычные скрипты, например плавный скролл...я подумал, что нужно использовать хуки, но так возникла проблема:
Есть у меня такой простецкий код, и он работает, но если я перейду на другой роут, а потом вернусь на этот же, в консоле пишет ошибку: "Uncaught TypeError: Cannot read property 'style' of undefined"
P.S при этом скрипт продолжает работать

created () {
    window.addEventListener('scroll', () => {
          let el = this.$refs.parallax;
          let val = document.documentElement.scrollTop / 100;
          el.style.filter = `blur(${val}px)`;
    })
}

Answer 1

[Андрей Ололощенко]

Я бы вам советовал подучить хуки и что происходит в вашем случае. Вы инициализирует скролл в руке created, однако на этом хуке компонен ещё не находится в дом дереве поэтому вы ловите ошибку. Вам нужно использовать этот же код в хуке mounted.

Comments

[george_izot1]

Ты сам то понял что нагородил ?

[fazanaka]

george_izot1, он посоветовал перенести из хука created в mounted ! Что непонятного ?

[AlexCraft]

Во Vue важно понять как работать с асинхронными данными. Если данные получаете через async await (или как-то еще асинхронно) и потом используете их где-то в компоненте, то обязательно в самом корневом элементе этого компонента (следующим за template) поставить v-if="asyncData". AsyncData - это мое название, в данном примере имеются в виду вообще любые данные, получаемые асинхронно. Это значит, что компонент не отрендерится в DOM-дерево, пока не придут асинхронные данные (asyncData в данном примере). Пока я это не понял, не мог нормально работать с Vue. Это важно практически везде - при получении данных из API, при обработке JSON локально, да вообще при обработке данных (даже если вы ждёте результат обработки какого-то метода). Поймёте асинхру, и всё, все двери откроются, получите левелап! )))

Answer 2

[Андрей]

Кое что всё таки нашел, возможно кому-то поможет решение:

methods: {
		blur () {
			let el = this.$refs.parallax;
			let val = document.documentElement.scrollTop / 100;
			el.style.filter = `blur(${val}px)`;
		}
	},
	created () {
		window.addEventListener('scroll', this.blur)
	},
	destroyed () {
		window.removeEventListener('scroll', this.blur);
	}

P.S в хуках жизненного цикла vue нельзя использовать стрелочные функции

Comments

[Strannyk]

Об этом прямо в документации сказано.

[Андрей]

я как раз там это и прочитал)

[Михаил]

Андрей, в mounted перенесите