Не удается получить фактическое «действительное» свойство в методе с использованием ref и VeeValidate

Question

У меня есть <ValidationObserver ref="observer">, в котором есть ValidationProviders. Чтобы получить свойство «valid» в методе getUnit(), я использую this.$refs.observer.fields["Unit"].valid, но на данный момент оно еще не имеет фактического свойства «valid». Это становится немного позже. Я должен сделать что-то в зависимости от допустимости этого поля.

Так как же получить фактическое «действительное» свойство поля, если оно еще не получено?

Создает некоторые вид задержки на один символ, но мне нужно немедленно поменять состояние кнопки «Продолжить».

Задержка состояния кнопки «Продолжить»:

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>

Предполагается, что поле vid или name равно unit.