Так что в основном я мог наблюдать за window.scrollY, добавляя обычный eventListner изменения размера в созданный крючок и удаляя его в уничтоженном хуке. При изменении размера я проверял window.scrollY, и если он был выше или ниже 500, я менял логическую переменную, к которой я привязываю разные классы:

<nav class="navbar u-no-padding"
     v-if="displayedNav"
     :class="minimizedNav ? 'navbar__not-collapsed' : 'navbar__collapsed'">

Также, если в url-адресе у меня есть :id (который является частью vue router), я полностью скрываю навигацию, поэтому я также использую директиву v-if.

Он работал нормально, но потом я понял, что могу использовать vue watch для просмотра window.srollY, чтобы изменить некоторую логическую переменную в data (), когда window.srollY больше или меньше 500

Я также могу смотреть this.$route.params.id и, если он установлен, изменить this.displayed на false.

Итак, в конце у меня будут два наблюдателя, которые изменят логические значения, и на этом логическом я что-то делаю с навигацией, как показано в html. Я попытался создать это и в итоге получил

export default {
    data() {
        return {
            minimizedNav: true,
            displayedNav: true,
            buildingId: this.$route.params.id
        }
    },
    watch: {
        'buildingId' : (data) => {
            console.log(data);
            if(data) this.displayedNav = false;
        },
        'window.scrollY' : (data) => {
            console.log(data);
            if(data > 500) this.minimizedNav = false;
            if(data <= 500) this.minimizedNav = true;
        }
    }
}

Но это не работает, я подозревал, что он будет console.log(data), где данные this.$route.params.id или buildingId при каждом его изменении. Но это ничего не утешает. Почему, что я здесь делаю не так?

0
BT101 15 Сен 2018 в 00:57

2 ответа

Лучший ответ

Vue прикрепляет наблюдателей ко всем вашим свойствам данных внутри компонента (состояние), которые также отслеживают, где они используются.

Vue не прикрепляет наблюдателя к переменным window. Он делает это только для своих данных и вычисленных свойств. По этой причине ваш наблюдатель window.scrollY никогда не вызывается.

Ваше предыдущее решение было правильным, когда вы прислушивались к изменению размера.

2
Nishant Arora 14 Сен 2018 в 22:03

Вместо watch вы можете использовать computed, чтобы напрямую вернуть свои условия следующим образом

export default {
    data() {
        return {}
    },

    computed: {
        displayedNav: function() {
            if(this.$route.params.id){
               return false;
            else {
               return true;
            }
        },
        minimizedNav: function() => {
            if(window.scrollY > 500) {
              return false;
            } else {
              return true;
            }
        }
    }
}

В вашем шаблоне используйте вычисляемое свойство следующим образом.

<nav class="navbar u-no-padding"
     v-if="displayedNav"
     :class="minimizedNav ? 'navbar__not-collapsed' : 'navbar__collapsed'">

Vuejs советует по возможности использовать computed over watch

Если у вас есть данные, которые необходимо изменить на основе других данных, соблазнительно злоупотреблять watch - особенно если вы из Фон AngularJS. Однако часто лучше использовать Свойство computed, а не императивный обратный вызов watch

https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

1
zapping 15 Сен 2018 в 07:07