Vue 仅在组件加载时绑定类

Posted 2023-02-23

【中文标题】Vue 仅在组件加载时绑定类

【英文标题】：Vue bind class only on component load

【发布时间】：2021-07-04 20:59:56

【问题描述】：

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

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

【问题讨论】：

发布您的代码。

【参考方案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】：

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