使用vee-validate 4访问反应属性

Question

我正在考虑Vee-Validate (v4)，以及如何在不丢失Vue的反应性的情况下将其合并到Vue 3项目中(即，不依赖于简单地传递给表单提交事件的值)。

举个例子，如果我创建了一个具有自动补全功能的假设组件，并在输入了3个字母后向服务器发送了一个get请求，但输入本身需要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，验证消息也足以作为示例。

Answer 1

您可以在这里使用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>组件并将schema传递给它，那么应该可以很好地工作。