Vue中Pug动态class无法访问计算属性的问题及解决方案

问题现象 #

使用Vue的计算属性（computed）动态切换DOM元素的className时，Pug模板无法访问该计算属性：

• 手动将类名的条件设为true时，类名切换功能正常；
• 将计算属性赋值给Pug变量后，仍然无法触发类名切换；
• 改用纯HTML模板时，动态类切换功能完全正常。

相关代码示例 #

Pug模板代码 #

div.container
  button(@click='isActive = !isActive') Toggle Class
  //- 无法正常工作的写法
  div(class={ 
    active: isActiveComputed 
  }) 测试计算属性切换类
  //- 手动设置true可正常生效
  //- div(class={ active: true }) 测试手动设置

Vue JS代码 #

new Vue({
  el: '#app',
  data() {
    return {
      isActive: false
    }
  },
  computed: {
    isActiveComputed() {
      return this.isActive
    }
  }
})

解决方案 #

将类名对象的定义写在同一行即可解决该问题，修改后的Pug代码如下：

div.container
  button(@click='isActive = !isActive') Toggle Class
  div(class={ active: isActiveComputed }) 测试计算属性切换类

内容的提问来源于stack exchange，提问作者Bekzod