VeeValidate не проверяет вводимые данные из динамической формы

Я пытаюсь создать динамические формы с проверками, используя veeValidate в vuejs, способ, которым я пытаюсь это сделать, - это создание массива объектов внутри данных компонента, например:

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


person Angelmartin11    schedule 23.05.2020    source источник


Ответы (1)


Когда вы работаете внутри v-for, лучше всего (и очевидно, необходимо) идентифицировать ваши ValidationProvider с помощью vid, например:

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

Я смог увидеть все ваши сообщения об ошибках, когда добавил это в ваш пример.

person Ryley    schedule 25.05.2020
comment
Ты спас мне день .. !! - person ajin; 17.01.2021