Vuelidate не работает должным образом с входами Dynami c - PullRequest
Новая
       36

Vuelidate не работает должным образом с входами Dynami c

1 голос
/ 16 июня 2020

Я использую пакет Vuelidate для проверки формы в моем приложении Vue. Это отлично работает для всех базовых c форм, но у меня есть одна форма, которая генерирует динамические c входные данные в зависимости от того, что возвращается с сервера.

Вот моя форма: 

<template>
  <div>
    <form v-on:submit.prevent="onSubmit">
      <fieldset>
        <div v-for="input in inputList" :key="input.label">
          <input :type="input.type" v-model="form[input.detail]" :placeholder="input.label">
          <div v-if="submitted && !$v.form[input.detail].required" class="invalid-feedback">{{input.label}} is required</div>
        </div>
      </fieldset>
      <input id="form-submit" type="submit">
    </form>
  </div>
</template>

Вот мои данные формы: 

<script>
import { required } from "vuelidate/lib/validators";

export default {
  name: "HelloWorld",
  data() {
    return {
      inputList: [
        { detail: "player_points", type: "number", label: "Player Points" },
        { detail: "player_rebounds", type: "number", label: "Player Rebounds" }
      ],
      form: {
        player_points: null,
        player_rebounds: null
      },
      submitted: false
    };
  },
  validations() {
    return {
      form: {
        player_points: { required }
      }
    };
  },
  methods: {
    onSubmit: function() {
      this.submitted = true;

      this.$v.$touch();
      if (this.$v.$invalid) {
        return;
      }
    }
  }
};
</script>

Как видите, я пытаюсь проверить только поле player_points, а НЕ поле player_rebounds, но у меня возникает проблема. Это нормально работает, если я попытаюсь проверить оба.

Вот пример кода:

CODE SANDBOX EXAMPLE

Вы сможете реплицировать проблема, которую я вижу здесь.

Желаемый результат.

Только к полю Player Points применяется проверка.

...