Vue: 무선을 부울에 바인딩하고 있습니다.

Vue: 무선을 부울에 바인딩하고 있습니다.

모델의 부울 값에 라디오 버튼을 바인딩하는 데 문제가 있습니다.

이 예에서는 https://jsfiddle.net/krillko/npv1snzv/2/ 를 사용합니다.

로드 시 라디오 버튼이 체크되지 않고 변경하려고 하면 모델의 '프라이머리' 값이 비어 있습니다.

시도했습니다.

:checked="variation.primary == true"

아무 효과도 없어요.

Vue의 문자열 값이 아닌 부울 값에 옵션버튼을 바인드하려면 값 속성에 v-bind를 사용합니다.

<input type="radio" v-model="my-model" v-bind:value="true">
<input type="radio" v-model="my-model" v-bind:value="false">

이러한 값을 백엔드 데이터와 일치시키는 방법은 사용자에게 맡기겠습니다.

이 시나리오에서는 체크박스는 그다지 좋지 않습니다.사용자가 이 체크박스를 공백으로 둘 수 있기 때문에 답변을 얻을 수 없습니다.yes/no 또는 true/false 질문을 할 경우 체크박스 대신 라디오버튼을 사용해야 합니다.

당신이 찾고 있는 것은checkbox업데이트된 jsfiddle입니다.

사용 사례는 라디오 버튼의 작동 방식이 아닙니다.

이 예를 보세요.

new Vue({
  el: '#app',
  data: {
    picked: 'One',
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br><br>
  <span>Picked: {{ picked }}</span>
</div>

저도 이런 일을 겪었는데 기억나는 건valueAtribute는 라디오 버튼에 대해 실제로 변경해서는 안 됩니다.변경사항(및 바인드해야 할 것)은checked기여하다.

그런 다음 변경 이벤트를 처리하여 데이터에서 올바른 항목 값을 설정해야 합니다.

당신의 jsFiddle에 근거해서, 당신이 찾고 있는 것은 다음과 같습니다.

<div id="l-main">
    <div v-for="(variation, key) in variations">

        <label>

          {{ variation.name }}

          <input 
            type="radio"         
            name="Test"
            :value="key"
            :checked="variation.primary"
            @change="onChange"
            />

        </label>
    </div>

    <br>Output:<br>
    <div v-for="(variation, key) in variations">
        {{ variation.name }} {{ variation.primary }}
    </div>

</div>

var vm = new Vue({
    el: '#l-main',
    data: {
        variations: {
            '41783' : {
                'name': 'test1',
                'primary': false
            },
            '41785' : {
                'name': 'test2',
                'primary': true
            }        
        }
    },
    methods: {
        onChange($event) {  
            // the primary variation is the one whose key
            // matches the value of the radio button that got checked
            for (const key in this.variations) {
                this.variations[key].primary = key === $event.target.value;
            }
        }
    }
});

타입을 무선에서 체크박스로 바꾸면 동작합니다.

<input type="checkbox" v-model="variation.primary" name="Test">

언급URL : https://stackoverflow.com/questions/45187048/vue-binding-radio-to-boolean