Блог

Я задумываюсь о Vee-Validate next (v4) и о том, как я мог бы включить его в проект Vue 3, не теряя реактивности Vue (т. Е. Не полагаясь на значения, просто передаваемые в событие отправки формы).

Например, если бы я создавал гипотетический компонент с функцией автозаполнения и отправлял запрос get на сервер после ввода 3 букв, но для того, чтобы сам ввод был действительным, требовалось 8 букв, как бы я получил значение, связанное с вводом?

используя обычный Vue, с псевдокодом что-то вроде:

 defineComponent({
  setup () {
    const myVal = ref('')
    const options = ref([])
    watchEffect(() => if (myVal.value.length > 3) {
      axios.get(...).then(serverVals => options.value = serverVals))
    })
    return { myVal, options }
 

как бы я добился этого с помощью vee-validate 4.x?

 defineComponent({
  setup () {
    const schema = yup.object({ myVal: yup.string().required().min(8) })
    // ???? what now to watch myVal 
 

пожалуйста, обратите внимание, что речь идет не об автозаполнении — ползунок диапазона, в котором я хотел вызвать сервер, когда значение было больше 10, но сообщение о проверке, если оно больше 90, также будет достаточным в качестве примера.

Вы могли бы использовать useField здесь, чтобы получить реактивное значение, которое просматривается автоматически.

 const { value: myVal, errorMessage } = useField('myVal', undefined, {
  initialValue: ''
});
const options = ref([])
watchEffect(() => if (myVal.value.length > 3) {
  axios.get(...).then(serverVals => options.value = serverVals))
})

return { myVal, options }
 

В документации приведен пример использования useField :

https://vee-validate .logaretm.com/v4/guide/composition-api#usefield ()

Обратите внимание, что вам не нужно использовать useForm , если вы используете <Form> component и переходите schema к нему, тогда это должно работать нормально.