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

Question

我有一个带有以下 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>

组件（和应用程序）定义如下：

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 属性）并且我不想在父级（整个独立组件背后的想法是尽可能多地抽象逻辑）

更新：对于任何感兴趣的人来说，here 是解决方案，感谢@thanksd

Answer 1

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

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

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

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

Vue.JS custom radio button component requires clicking twice

radio-button

vue.js

vue-component

vuejs2