VeeValidate 不验证动态表单的输入

Question

我正在尝试使用 vuejs 中的 veeValidate 生成带有验证的动态表单，我尝试执行此操作的方法是在组件的数据内创建一个对象数组，例如：

data(){
   return{
inputs: [
      {
        id: 1,
        label: "first name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      },
      {
        id: 2,
        label: "last name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      } ]
   }
}

对于 html：

  <ValidationObserver v-slot="{ handleSubmit }">
    <b-form @submit.prevent="handleSubmit(onSubmit)" class="p-5">
      <div v-for="inp in inputs" v-bind:item="inp" :key="inp.id">
        <ValidationProvider name="Value" :rules="inp.rules" v-slot="validationContext">
          <b-form-group
            :id="'input-group-'+inp.id"
            :label="inp.label"
            :label-for="'input-'+inp.id"
            label-cols="4"
            label-cols-lg="2"
          >
            <div v-if="inp.type != 'select'">
              <b-form-input
                :type="inp.type"
                :placeholder="inp.placeholder"
                v-model="inp.model"
                :id="'input-'+inp.id"
                :name="'input-'+inp.id"
                :state="getValidationState(validationContext)"
                aria-describedby="input-1-live-feedback"
              ></b-form-input>
              <b-form-invalid-feedback
                :id="'input-'+inp.id+'-live-feedback'"
              >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
            </div>
          </b-form-group>
        </ValidationProvider>
      </div>

      <button type="submit">Submit</button>
    </b-form>
    <div>
      Look at the output
      {{show}}
    </div>
  </ValidationObserver>

当尝试在 html 上动态生成输入时，这工作得很好。但当我尝试向该动态表单添加表单验证时，问题就出现了。我期望/想要做什么：假设表单有一个提交按钮，如果输入具有“必需”验证，我期望发生的情况是，如果我按下按钮而不先输入任何内容，所有输入都应该显示一个警告说“需要此输入”或类似的内容。

问题：真正发生的情况是，当您按下提交按钮而没有在输入中输入任何内容时，只有最后一个输入会显示警告消息。

这是我正在讨论的示例的 codeSandbox 链接： https://codesandbox.io/s/codesandbox-733yf ?fontsize=14&hidenavigation=1&theme=dark&file=/src/Demo.vue

Answer 1

当您在 a 内部工作时，v-for最佳实践（显然是必要的）用ValidationProvidera 来标识您的 s vid，如下所示：

    <ValidationProvider :vid="'vp'+inp.id" name="Value" :rules="inp.rules" v-slot="validationContext">

当我将其添加到您的示例中时，我能够看到您的所有错误消息。