VueJS输入字段值未绑定

Question

我的通用输入字段有问题。 换句话说，我制作了一个通用输入字段，它应该涵盖常规输入字段、复选框和单选按钮。 但是当我尝试将字符串值作为无线电输入字段的值传递时，该道具为空。

 <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);
    }
  }