확인란의 선택 상태를 지우는 방법은 무엇입니까? vue가

Question

인 경우 다음 버튼을 클릭 할 때 체크 박스 상태 인 을 제거하려고하지만 vue를 사용하여 제거하지 마십시오. 폼에 네 개의 섹션이 사용자가 각 양식에서 하나의 옵션을 선택합니다 같은

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    id:0, 
 
    items: [ 
 
    {'id':1,'name':'chk-a','options':['a1','b1','c1','d1']}, 
 
    {'id':2,'name':'chk-b','options':['a2','b2','c2','d2']}, 
 
    {'id':3,'name':'chk-c','options':['a3','b3','c3','d3']}, 
 
    {'id':4,'name':'chk-d','options':['a4','b4','c4','d4']}, 
 
    ] 
 
    }, 
 
    methods: { 
 
    next: function (id) { 
 
     if(id<this.items.length){ 
 
     this.id++ 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <h1>Checkbox</h1> 
 
    <div v-for="item in items[id].options"> 
 
    <input type="radio" name="chk" :id="id"> 
 
    <label for="two">{{item}}</label> 
 
    </div> 
 
    <button @click="next(id+1)">Next</button> 
 
</div>

Answer 1

것 같습니다 : 이 데모 코드입니다. 그렇다면, 필드 selected_option 또는 비슷한 것을 고려하고 v-model를 사용

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    id:0, 
 
    items: [ 
 
    {'id':1,'name':'chk-a','options':['a1','b1','c1','d1'], 'selected_option': ''}, 
 
    {'id':2,'name':'chk-b','options':['a2','b2','c2','d2'], 'selected_option': 'c2'}, 
 
    {'id':3,'name':'chk-c','options':['a3','b3','c3','d3'], 'selected_option': ''}, 
 
    {'id':4,'name':'chk-d','options':['a4','b4','c4','d4'], 'selected_option': ''}, 
 
    ] 
 
    }, 
 
    methods: { 
 
    next: function (id) { 
 
     if(id<this.items.length){ 
 
     this.id++ 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <h1>Checkbox</h1> 
 
    <div v-for="item in items[id].options"> 
 
    <input type="radio" :name="items[id].name" :id="id" v-model="items[id].selected_option" :value="item"> 
 
    <label for="two">{{item}}</label> 
 
    </div> 
 
    <button @click="next(id+1)">Next</button> 
 
</div>

참고 위의 'c2'가 자동으로 두 번째 섹션에서 선택했다고. 이는 v-model의 기본값에 대한 예를 보여주고 확인란을 사용하고 예상 데이터가 어떻게 표시되는지 보여줍니다. 이러한 값을 나중에 검색하는 것은 items을 반복하고 해당 selected_option 값을 추출하여 쉽게 수행 할 수 있습니다.

마찬가지로 selected_option 필드의 값을 ''으로 설정하면 checked 상태를 제거 할 수 있습니다.