javascript - 无法在使用 ref 和 VeeValidate 的方法中获得实际的“有效”属性

Question

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

那么，如果还没有，我如何获得该字段的实际“有效”属性？

它会在一个符号中产生某种延迟，但我需要立即更改“继续”按钮的状态。

“继续”按钮的状态延迟：

标签： javascriptvue.jsvee-validate

Answer 1

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

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

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

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

这假定字段vidorname是unit。