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>

组件（和app）定义如下：

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

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

将radio组件模板更改为此（不需要传递值或绑定v模型）：

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

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

1 个答案: