VueJS Значение поля ввода не является обязательным

Question

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

<TextInput
        v-model="name"
        description="Name & LastName"
        name="Name & Surname"
        rules="required"
      />
      <TextInput
        v-model="age"
        type="number"
        description="Age"
        name="Age"
        rules="required|digits:2"
      />
      <div id="gender-fields">
        <legend>Please specify your gender:</legend>
        <TextInput
          v-model="gender"
          type="radio"
          description="Male"
          name="Gender"
          rules="required"
        />
        <TextInput
          v-model="gender"
          type="radio"
          description="Female"
          name="Gender"
          rules="required"
        />
        <TextInput
          v-model="gender"
          type="radio"
          description="Unspecified"
          name="Gender"
          rules="required"
        />
      </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Так я объявляю свои поля ввода в форме. Вот определение поля ввода.

<template>
  <ValidationProvider
    tag="div"
    :rules="rules"
    :name="name"
    :vid="vid"
    v-slot="{ errors }"
    :mode="mode"
  >
    <label>
      {{ description }}
      <input :type="type" v-model="currentValue" :value="value" />
    </label>
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
import { ValidationProvider } from "vee-validate";
export default {
  name: "TextInput",
  components: {
    ValidationProvider
  },
  props: {
    description: {
      type: String,
      default: ""
    },
    value: {
      required: true
    },
    rules: {
      type: [String, Object],
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    vid: {
      type: String,
      default: undefined
    },
    type: {
      type: String,
      default: "text"
    },
    mode: {
      type: String,
      default: "aggressive"
    }
  },
  data: () => ({
    currentValue: ""
  }),
  watch: {
    currentValue(val) {
      // allows us to use v-model on our input.
      this.$emit("input", val);
    }
  }
};
</script>

<style></style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Только те поля ввода, с которыми у меня проблема, - это переключатели. Я что-то упускаю?

Answer 1

Самый простой способ исправить это - пропустить ввод :value="value" на вход и изменить часы следующим образом:

  watch: {
    //watch for value to change and assign it to our currentValue
    value: {
      handler(val) {
        this.currentValue = val;
      },
      //this makes it run the handler function on mount in addition to whenever the value changes
      immediate:true
    },
    currentValue(val) {
      // allows us to use v-model on our input.
      this.$emit("input", val);
    }
  }