Vue.JS 自定义单选按钮组件需要点击两次答案

【问题标题】：Vue.JS custom radio button component requires clicking twiceVue.JS 自定义单选按钮组件需要点击两次
【发布时间】：2017-07-30 15:22:05
【问题描述】：

我有一个带有以下 HTML 标记的自定义单选按钮组件：

<div id="app">
{{message}} - {{sex}}
<radio value="m" v-model="sex" name="sex">Male</radio>
<radio value="f" v-model="sex" name="sex">Female</radio>
</div>

组件（和app）定义如下：

Vue.component('radio', {
    model : {
      prop:'checked',
      event:'change'
    },
    props : {
      value:null,
      name:String
    },
  data : () => ({
    val:''
  }),
  methods : {
    update (e) {
        this.$emit('change',e.target.value);
    }
  },
  template:'<div><input :value="value" :name="name" type="radio" v-model="val" @change="update"><slot></slot></div>'
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'selected:',
    sex:''
  }
})

jsFiddle

它可以正确切换单选按钮（大部分情况下）。

问题：为此，我必须单击男性单选按钮两次。我希望能够只单击一次来切换它们。也许我没有正确使用here 描述的model 属性？

我看到this 的问题，但它使用较旧的 Vue（它没有 model 属性），我不想在父级上捕获 @change（单独组件背后的整个想法是尽可能多地抽象逻辑）

更新：感谢@thanksd，here 是解决方案

【问题讨论】：

标签： radio-button vue.js vuejs2 vue-component

【解决方案1】：

不完全确定导致该错误的原因，但我看到您正在执行一些不必要的数据绑定，这些数据绑定显然会导致该问题。

将radio组件模板改成这个（不需要传值或者绑定v-model）：

<div><input :name="name" type="radio" @change="update"><slot></slot></div>
去掉 val 数据属性（因为它现在没有被使用）。
将您的更新方法更改为this.$emit('change', this.value);（您可以直接引用您分配给此radio 组件的值）。

【讨论】：