Атрибуты реактивного тела Nuxt / Vue - PullRequest
Новая
       9

Атрибуты реактивного тела Nuxt / Vue

0 голосов
/ 30 августа 2018

Я хочу добавить класс menu-opened к тегу body, когда я нажимаю на div меню Burger.

Мой div 

<div v-on:click="openMenu"></div>

Метод openMenu 

methods: {
     openMenu() {
       console.log('open menu launch')
       this.$store.dispatch('menu/setMenu', true)
     }
    }

Мой магазин 

state = {
    isMenuOpen: false
}

actions = {
    setMenu({ commit }, value) {
      commit('SET_MENU_OPEN_STATUS', value)
    }
}

mutations= {
    SET_MENU_OPEN_STATUS(state, newState){
        state.isMenuOpen = newState
    }
}

В моем шаблоне я получил этот код для добавления класса в тело в зависимости от состояния значения isMenuOpen: 

export default {
    data() {
        return {
           menuState: this.$store.state.isMenuOpen
        }
    },
    head () {
      return {
        bodyAttrs: {
          class: this.menuState ? 'menu-opened' : ''
        }
      }
    }
}

Мой магазин работает хорошо, значение изменяется, когда я нажимаю на мой div, но оно не добавляет класс, как если бы функция head не реагировала ...

Спасибо за вашу помощь

1 Ответ

0 голосов
/ 30 августа 2018

Это потому, что метод head вызывается только один раз при начальной загрузке страницы. Если вы хотите обновить значения, которые вы можете, но вам нужно будет снова вызвать функцию head().

Вы можете сделать это с watcher или позвонить в ваш магазин.

Быстрый и грязный способ был бы с комбинацией вычисленных свойств и наблюдателя. 

export default {
    data() {
        return {
           menuState: this.$store.state.isMenuOpen
        }
    },
    head () {
      return {
        bodyAttrs: {
          class: this.isMenuOpen ? 'menu-opened' : ''
        }
      }
    },
   computed: {
     isMenuOpen () {
       return this.$store.state.isMenuOpen
     }
   },
   watch: {
     isMenuOpen () {
       this.head()
     }
   }
}
...