radio-button - 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

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

1. 更改 radio组件模板为此(不需要传递值或绑定(bind) v-model):

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

2. 去掉 val data 属性(因为它现在没有被使用)。

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