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組件的值）。