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

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

问题：为此，我必须单击“男性”单选按钮两次。我只想单击一次即可切换它们。也许我没有正确使用此处model描述的属性？

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

更新：对于任何有兴趣在这里是解决由于@thanksd

Answer 1

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

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

   <div><input :name="name" type="radio" @change="update"><slot></slot></div>

2. 删除valdata 属性（因为现在没有使用它）。

3. 将您的更新方法更改为this.$emit('change', this.value);（您可以直接引用您分配给该radio组件的值）。