Question

问题在于：当我检查男性或女性时，他们都会被检查。早些时候，使用v-model的简单方法并没有导致这个问题。

另外，建议我是否可以将@toparent推到组件内某处而不是外面？但如果你有时间，这是一个副作用。

这是组件。

Vue.component('singleselect', {
    template: `
    <div>
        <p class="form__answer">
            <input type="radio" :id="meta.id" :value="meta.value" @click="notifyParent($event.target.value)"
            <label :for="meta.id">
                {{ meta.value }}
            </label>
        </p>
    </div>
    `,
    methods: {
        notifyParent(selected) {
            this.$emit('toparent', {type: this.meta.type, data: selected});
        }
    },
    props: {
        meta: {
            type: Object,
            required: true
        }

    }
});

以下是用法：

<singleselect @toparent="inbound($event)" :meta="{type: 'gender', id: 'male', value: 'Male'}"></singleselect>
<singleselect @toparent="inbound($event)" :meta="{type: 'gender', id: 'female', value: 'Female'}"></singleselect>

Answer 1

通过给出组中的每个单选按钮来定义无线电组   同名。建立无线电组后，选择任何无线电   该组中的按钮会自动取消选择当前选定的任何按钮   同一组中的单选按钮。

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

您输入无名称。他们没有v-model 来控制它们。所以没有什么能阻止他们同时被检查。

对于附带问题，您可以将inbound作为此类属性传递

<singleselect :inbound="inbound"></singleselect>

然后在组件中执行此操作

export default {
  methods: {
    notifyParent(selected) {
      this.inbound({ type: this.meta.type, data: selected });
    }
  },
  props: {
    //   ...
    inbound: {
      type: Function,
      required: true
    }
  }
};

有意义吗？

Answer 2

我明白了。必须在Vue 2.2.0 + model中使用新功能。

<强>标记

<radio v-model="form.gender" id="male" value="Male" name="sex"></radio>
<radio v-model="form.gender" id="female" value="Female" name="sex"></radio>

<强>组件

Vue.component('radio', {
    model: {
        prop: 'checked',
        event: 'change'
      },
    template: `
    <div>
        <p class="form__answer">
            <input type="radio" :id="id" :value="value" :name="name" @change="update">
            <label :for="id">
                {{ value }}
            </label>
        </p>
    </div>
    `,
    methods: {
        update(e) {
            this.$emit('change', this.value);
          }
    },
    props: {
        value: null,
        name: {
            type: String,
            required: true
        },
        id: {
            type: String,
            required: true
        }
    }
});

数据仍然通过v-model正常传递给父母。

正如Jacob Goh所说，name属性是关键。

Answer 3

以上答案的行内已经说过了。但是，我想强调这个问题。

就我而言，我在这样的组件中有一组单选按钮：

Image of radio button group

要限制当时仅要检查的三个按钮之一，我必须在三个无线电输入中添加相同的名称：

<input type="radio" v-model="status" value="rejected" id="rejected" name="status">
<label class="rejected" for="rejected">Avvist</label>

<input type="radio" v-model="status" value="ongoing" id="ongoing" name="status">
<label class="ongoing" for="ongoing">Pågår</label>

<input type="radio" v-model="status" value="done" id="done" name="status">
<label class="done" for="done">Utført</label>

这是本书的正确方法。但是，这种方式实际上使所有组件具有相同的无线电组。这意味着，如果选择了rejected，浏览器将不知道要切换哪个值为rejected的输入，从而使所有输入均未切换。

解决方案是简单地为每个组件添加唯一的名称。

<input type="radio" v-model="status" value="rejected" :id="'rejected'+someUniqueId" :name="'status'" + someUniqueId>
<label class="rejected" :for="'rejected'+someUniqueId">Avvist</label>

我希望这可以节省调试时间。

单选按钮在自定义组件内部时不遵守已检查状态

3 个答案: