#javascript #html #vue.js
Вопрос:
Я исхожу из предположения, что v-show покажет/скроет элементы на основе переданных данных.
По какой-то причине мой элемент не будет динамически скрываться, когда v-show имеет значение false. Когда я вручную изменю переменную (showNav) на false, она будет скрыта при загрузке страницы, поэтому она, похоже, работает должным образом.
Моя переменная (showNav) зависит от прокрутки. При прокрутке вверх он устанавливается в значение true, при прокрутке вниз-в значение false. Я бы хотел, чтобы моя навигационная панель скрывалась при прокрутке вниз, но этого не происходит.
Поведение прокрутки работает правильно. Оба правильно изменяют мою переменную v-show (showNav) на значение true или false, но элемент остается видимым в любое время.
HTML шаблон
lt;templategt; lt;div id="home-page"gt; lt;Navbar id="navbar" v-show="showNav" :class="{change_background: scrollPosition gt; 50}" /gt; lt;/divgt; lt;/templategt; JS
mounted() { window.addEventListener('scroll', function(){ // detects new state and compares it with the old one if ((document.body.getBoundingClientRect()).top gt; this.scrollPos) { this.showNav = true; console.log(this.showNav); } else { this.showNav = false; console.log(this.showNav); } // saves the new position for iteration. this.scrollPos = (document.body.getBoundingClientRect()).top; }) }, data() { return { scrollPosition: null, scrollPos: 0, showNav: true, } }, Комментарии:
1. быстрое решение: просто измените обратный вызов, который вы передаете в обработчике событий «прокрутка», с обычного на функцию со стрелкой. Тогда ключевое слово «это» будет вести себя правильно
Ответ №1:
Вам необходимо обработать scroll события, привязав один из методов, определенных в methods блоке, к событию прокрутки окна. В вашем случае callback функция, переданная для scroll прослушивания событий, не будет иметь доступа к vue instance и, следовательно, не будет обновлять реактивные свойства vuejs . Смотрите рабочий образец ниже.
new Vue({ el: "#app", data() { return { scrollPosition: null, scrollPos: 0, showNav: true, } }, mounted() { window.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); // To avoid memory leakage }, methods: { handleScroll(event) { // detects new state and compares it with the old one if ((document.body.getBoundingClientRect()).top gt; this.scrollPos) { this.showNav = true; console.log(this.showNav); } else { this.showNav = false; console.log(this.showNav); } // saves the new position for iteration. this.scrollPos = (document.body.getBoundingClientRect()).top; } } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="app" style="min-height: 1000px;"gt; lt;span v-show="showNav"gt;You are trying to hide melt;/spangt; lt;/divgt;