移动版切换菜单：vue with pug答案

【问题标题】：Toggle menu in mobile version: vue with pug移动版切换菜单：vue with pug
【发布时间】：2018-12-20 07:39:58
【问题描述】：

我在切换汉堡菜单时遇到问题，我的控制台抛出了一个

错误：导航未定义

header.pug

header.site-header
div.navbar
    div.navbar__link.navbar--brand  logo
    div.navbar__link.navbar--toggle
        buttton(@click='toggle(nav)') menu

    nav.nav.navbar__items.static(:class="{'nav--active': active.nav}")
        div.navbar__link language
        div.navbar__link one
        div.navbar__link two
        div.navbar__link three

main.js

data: {
    active: {
        nav: false
    },
}

methods: {
    toggle (element) {
        this.active.element = !this.active.element
    },
}

【问题讨论】：

标签： jquery html vue.js pug toggle

【解决方案1】：

你应该稍微改变按钮点击处理程序：

在哈巴狗标记到buttton(@click="toggle('nav')")。因为在您的示例中 nav 被确定为变量，所以它应该作为字符串传递。

在你错误地改变属性的方法中，它应该是：

toggle (element) {
    this.active[element] = !this.active[element]
},

【讨论】：