Смотрите window.scrollY и роутер: id в Vue2JS - PullRequest
Новая
       10

Смотрите window.scrollY и роутер: id в Vue2JS

0 голосов
/ 15 сентября 2018

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

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

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

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

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

Итак, в конце у меня будет два наблюдателя, которые будут менять логические значения, и на этих логических значениях я делаю что-то с nav, как показано в 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 при каждом их изменении.Но это ничего не утешает.Почему, что я здесь делаю не так?

Ответы [ 2 ]

0 голосов
/ 15 сентября 2018

Вместо 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;
            }
        }
    }
}

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

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

Vuejs советует по возможности использовать компьютерные часы

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

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

0 голосов
/ 15 сентября 2018

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

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

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

...