Question

当我点击菜单burger div时，我想在menu-opened标签上添加body类。

我的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函数不是反应性的...

感谢您的帮助

Answer 1

这是因为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()
     }
   }
}

Nuxt / Vue反应性实体属性

1 个答案: