在使用 ref 和 VeeValidate 的方法中无法获得实际的 "valid" 属性

Question

我有 <ValidationObserver ref="observer">，里面有一些 ValidationProviders。要在方法 getUnit() 中获得 "valid" 属性，我使用 this.$refs.observer.fields["Unit"].valid，但目前它还没有实际的 "valid" 属性。它得到了一点点。我必须根据这个字段的有效性做一些事情。

那么，如果还没有得到实际的 "valid" 属性字段，我该如何得到呢？

它在一个符号中造成某种延迟，但我需要立即更改 "Continue" 按钮的状态。

"Continue" 按钮的延迟状态：

Answer 1

字段在第一次渲染后才会注册，因此您需要添加一些检查以确保您的字段在检查之前存在。我建议在模板中这样做并避免使用 $refs 因为它们不是反应性的。

<!-- If used from the Provider slot props, it will always be present -->
<ValidationProvider v-slot="{ valid }">
  {{ valid }}
</ValidationProvider>

如果您需要从 Provider 插槽外访问 valid 属性，您也可以在 ValidationObserver 插槽道具上访问它。但是您需要先检查它是否存在。

<!-- If used from the Provider slot props, it will always be present -->
<ValidationObserver v-slot="{ fields }">
  {{ fields.unit && fields.unit.valid }}
</ValidationObserver>

这假设字段 vid 或 name 是 unit。

在使用 ref 和 VeeValidate 的方法中无法获得实际的 "valid" 属性

Can't get actual "valid" property in method using ref and VeeValidate

javascript

vue.js

vee-validate