Vuelidate vue.js 最新的 vue3 使用对象数组的 helpers.forEach 方法

Question

使用 Vue3 的最新 Vuelidate vue.js 对对象数组使用 helpers.forEach 方法。我尝试了运行表单，但验证导致出现如下所示的错误

Gives $response.$errors is undefined in the console Uncaught (in promise) TypeError: $response.$errors is undefined

export default {
  setup () {
    const rules = {
      collection: {
        $each: helpers.forEach({
          name: {
            required
          }
        })
      }
    }
    const state = reactive({
      collection: [
        { name: '' },
      ]
    })
    const v = useVuelidate(rules, state)
    return { v, state }
}
}

这是代码的模板

  <div
    v-for="(input, index) in state.collection"
    :key="index"
    :class="{
        error: v$.collection.$each.$response.$errors[index].name.length,
      }"
  >
    <input v-model="input.name" type="text" />
    <div
      v-for="error in v$.collection.$each.$response.$errors[index].name"
      :key="error"
    >
      {{ error.$message }}
    </div>
  </div>
</template>

Answer 1

有点晚了，但在您的模板中，您指的是 v$.collection 而不是 v.collection。在您的设置中，您将返回 v 而不是 v$

Answer 2

我需要使用 v$，因为 v$ 表示基于 useVuelidate

的全局变量

Vuelidate vue.js 最新的 vue3 使用对象数组的 helpers.forEach 方法

Vuelidate vue.js latest for vue3 using the helpers.forEach approach for array of objects

vuelidate

vuejs3