Vue 仅在组件加载时绑定类答案

【问题标题】：Vue bind class only on component loadVue 仅在组件加载时绑定类
【发布时间】：2021-07-04 20:59:56
【问题描述】：

我有一个多部分的表单 UI，每个部分都可以折叠。我想在加载时应用类，这样如果所有问题都已在一个部分中填写，则在加载表单组件时该部分会折叠，但类绑定（单独 - 在每个部分中我使用v-model，所以v-once 不是一个选项）不是反应性的（也就是说，当用户填写该部分中的所有问题时，它不会自动折叠）

有没有明智的方法来实现这一点？

【问题讨论】：

发布您的代码。

标签： vue.js bootstrap-4 vuejs2 vue-component

【解决方案1】：

您可以使用计算属性或方法来解决这个问题。

使用计算属性：

...
  computed: {
    collapsed() {
      return this.foo && this.bar
    }
  }
...

<div class='content' :class='{ collapsed }'>
  ...
</div>

Example

使用方法：

...
  methods: {
    computeCollapsed(inputs) {
      return inputs.every(x => x)
    }
  }
...

<div class='content' :class='{ collapsed: computeCollapsed([foo, bar]) }'>
  ...
</div>

Example

相比之下，只要发生重新渲染，方法调用将始终运行该函数。

来源Computed Caching vs Methods

如果你只有几个部分并且部分的数量是固定的，你应该使用计算属性而不是方法。

【讨论】：

【解决方案2】：

我最终克隆了非响应式的初始数据和道具，并使用它来设置初始状态。

【讨论】：