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属性），我不想在父级上捕获@change（整个构想背后的单独组件是抽象为逻辑是可能的）

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

Answer 1

不能完全确定是什么导致了这个bug，但我看到你正在做一些不必要的数据绑定是明显造成这个问题。

1. 更改radio组件模板这个（不需要传递值或绑定一个V模型）：

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

2. 摆脱val数据属性（自它现在没有被使用）。

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