Vuejs 공유 무선 구성 요소가 렌더에서 확인되지 않음

Vuejs 공유 무선 구성 요소가 렌더에서 확인되지 않음

원어민 라디오 입력을 확장한 vue 컴포넌트를 가지고 있습니다.추가 마크업과 스타일링으로 앱 전체에서 일반 라디오의 대역으로 사용할 수 있습니다.

<div class="radios">
  <radio-input name="radioInput" value="one" v-model="options.firstOption">
  <radio-input name="radioInput" value="two" v-model="options.firstOption">
  <radio-input name="radioInput" value="three" v-model="options.firstOption">
</div>

여기서는 jsfiddle(여기서는 jsfiddle)이라는 접근 방식을 따르고 있지만, 이 예에서는 그렇지 않지만 구성 요소가 v-model 특성을 허용하는 기능을 추가하려고 합니다.

지금까지의 .vue 컴포넌트 파일은 다음과 같습니다.

<template>
  <span class="radio-control">
    <input
      class="input-bool"
      type="radio"
      :name="name"
      :value="value"
      v-model="radioButtonValue">
  </span>
</template>

<script>
  export default {
    model: {
      prop: 'checked',
    },
    props: {
      name: String,
      value: String,
      checked: String
    },
    computed: {
      radioButtonValue: {
        get: function() {
          return this.checked;
        },
        set: function() {
          this.$emit('input', this.value);
        }
      }
    },
  };
</script>

좋습니다. 변경 시에도 잘 작동하고 모델도 업데이트 됩니다.문제는 컴포넌트가 렌더링될 때 무선의 체크된 Atribute가 적용되지 않기 때문에 누군가가 페이지를 열었을 경우 변경 이벤트가 발생할 때까지 모든 무선이 공백으로 표시됩니다.

Vue의 문서에는 다음과 같이 명시되어 있습니다.v-model는 폼 요소에서 발견된 초기 값, 선택 또는 선택된 속성을 무시합니다.Vue 인스턴스 데이터는 항상 사실의 소스로 취급됩니다."그것을 더해도 역시 차이가 없다.하지만 네이티브를 구하는데 어려움을 겪고 있어요checked렌더링 시 존재하는 라디오 버튼의 속성.

vue.js의 문제는 전혀 없습니다.@bertEvans는 제가 올린 코드가 정상적으로 동작하고 있다는 점에서 옳았습니다.문제는 페이지 위쪽에 같은 무선 입력이 따로 있다는 것이었다.name=""기여하다.여러분, 만약 여러분의 라디오 그룹이 예상대로 행동하지 않는다면, 각각의 그룹이 고유한 이름을 가지고 있는지 확인하세요!

언급URL : https://stackoverflow.com/questions/44035627/vuejs-shared-radio-component-not-checked-on-render