Vue.JS 커스텀 라디오 버튼 컴포넌트를 두 번 클릭해야 함

Vue.JS 커스텀 라디오 버튼 컴포넌트를 두 번 클릭해야 함

커스텀 옵션버튼 컴포넌트에는 다음 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

라디오 버튼을 올바르게 전환합니다(대부분).

문제: 그러기 위해서는 Male 라디오 버튼을 두 번 클릭해야 합니다.한 번만 클릭하여 전환할 수 있으면 좋겠습니다.아마도 나는 그것을 사용하지 않을 것이다.modelAtribute는 여기에 올바르게 기술되어 있습니까?

이 질문을 봤는데 오래된 Vue를 사용하고 있습니다.model@change를 부모에게 캡처할 필요가 없습니다(별도의 컴포넌트 뒤에 있는 전체 아이디어는 가능한 한 많은 로직을 추상화하는 것입니다).

업데이트: @thanksd덕분에 이 솔루션이 도움이 됩니다.

이 버그의 원인은 정확히 알 수 없지만, 문제의 원인이 되고 있는 불필요한 데이터 바인딩을 하고 있는 것을 알 수 있습니다.

1. 를 변경하다radio구성 요소 템플릿은 다음과 같이 지정됩니다(값을 전달하거나 v-모델을 바인딩할 필요가 없음).

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

2. 를 삭제하다val(지금은 사용되지 않기 때문에) 데이터 속성입니다.

3. 업데이트 방법 변경this.$emit('change', this.value);(이것에 할당한 값을 직접 참조할당신이 할당한 값을radio컴포넌트).

언급URL : https://stackoverflow.com/questions/42698768/vue-js-custom-radio-button-component-requires-clicking-twice