Vue模板中CSS模块$ style对象有问题

Question

我在Vue应用程序中使用CSS模块，其中模板的一部分需要动态类，但是在$ style对象中呈现类时遇到了问题。

我有一个内部数据，可切换布尔值。

data() {
  return {
    upper: false,
    lower: false,
  };
},

在下面的模板中，我有这个

<div
  :class="[$style['class 1'], activeClass]">
</div>

活动类的计算如下：

activeClass() {
  return this.$style['active-class'] = this.upper;
}

有一些根据内部逻辑处理上下限的方法。尽管这些内部数据值确实返回了预期值，但我似乎无法在模板中动态添加activeClass。

Answer 1

<script>
export default {
  activeClass() {
    console.log($style['active-class']);
    return this.$style['active-class'] = this.upper;
    // -> "red_1VyoJ-uZ"
    // an identifier generated based on filename and className.
  }
}
</script>