为什么此vueline函数在设置中不起作用，而仅在方法内部使用？

Question

我正在使用构图API使用vuelidate，但我不明白为什么v $ .. validate（）在我放入Methods之后，在设置之后正常工作。，但不在设置中。

因此，这有效：

setup() {
  // inspired from 
  // https://vuelidate-next.netlify.app/#alternative-syntax-composition-api
  const state = reactive ({
    // the values of the form that need to pass validation, like:
    name: ''
  })

  const rules = computed (() => {
    return {
      // the validation rules
    }

  const v$ = useVuelidate(rules, state)

  return {
    state,
    v$
  }
},
methods: {
  async submitForm () {
    const result = await this.v$.$validate()
    // either result: validation succeeded : axios post call
    // or failure and error messages show up.
  }
}

但是，这是不起作用的：

setup() {

  const state = reactive ({
    // the values of the form that need to pass validation, like:
    name: ''
  })

  const rules = computed (() => {
    return {
      // the validation rules
    }

  const v$ = useVuelidate(rules, state)

  const submitForm = async () {
    // **ERROR : Uncaught (in promise) TypeError: v$.$validate is not a function**
    const result = await v$.$validate()
    // either result: validation succeeded : axios post call
    // or failure and error messages show up.
  }

  return {
    state,
    v$,
    submitForm
  }
}

这有点痛苦，因为我在state是一个参数的情况下使用Axios调用的合并。将整个代码放在一个地方会更容易。

Answer 1

useVuelidate返回计算，因此您需要在访问其任何属性时使用.value，例如$ error < /code>，<代码> $ validate 设置函数。

在模板中它为您解开。