Nuxt/Vue 반응체 속성

Nuxt/Vue 반응체 속성

클래스를 추가하고 싶다menu-opened에서body메뉴 버거 div를 클릭했을 때 태그를 붙입니다.

마이디브

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

open Menu 메서드

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를 클릭하면 값이 바뀌지만, 헤드 기능이 반응하지 않으면 클래스를 추가하지 않습니다.

도와줘서 고맙습니다.

인 Nuxt

이는 헤드 메서드가 첫 페이지 로드 시 한 번만 호출되기 때문입니다.값을 갱신할 수 있지만,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()
     }
   }
}

인뷰

이런 이벤트도 봐야 되고mounted또는beforeDestroy거기에 기술되어 있다

https://vuejs.org/v2/guide/instance.html

순수한 js를 사용하여 dom을 수정한다.

const bodyElement = document.querySelector('body')
bodyElement.classList.add('a');
bodyElement.classList.remove('b');
bodyElement.classList.toggle('c');

https://developer.mozilla.org/pl/docs/Web/API/Element/classList

다음과 같은 작업을 수행할 수 있습니다.

마이디브

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

open Menu 메서드

methods: {
     openMenu() {
       console.log('open menu launch')
       this.$refs.myDiv.closest('body').classList.add("menu-opened")
     }
    }

그런 다음 닫기 메뉴 버튼에 대해 다음과 같은 기능을 구현해야 합니다.

this.$refs.myDiv.closest('body').classList.remove("menu-opened")

언급URL : https://stackoverflow.com/questions/52099638/nuxt-vue-reactive-body-attributes