チェックボックスのチェック状態をクリアする方法は？ 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'は自動的に2番目のセクションで選択していること。これは、v-modelのデフォルト値の例を示し、チェックボックスを使用して、期待されるデータがどのように表示されるかを示します。これらの値を後で取得するには、itemsを反復し、対応するselected_optionの値を引き出すことで簡単に行うことができます。

同様に、selected_optionフィールドの値を''に設定するだけで、checkedステータスを削除することができます。