使用 vee-validate 4 访问响应式属性

Question

我正在研究 Vee-Validate next (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 传递给它，那么应该可以正常工作。