Vueでは、条件に基づいてチェックボックスをキャンセルする方法はありますか？

Question

少なくとも1つのチェックボックスをオンにしたいのですが、私はv-modelと:checkedのコンセプトを混ぜています。

docは言う：

v-model任意のフォーム要素で見つかった最初のvalue、checkedまたはselected属性 を無視します。 Vueインスタンスデータ を常に真実のソースとして扱います。私は私のモデルを変更することが防ぐことができますが、私はチェックする]チェックボックスを防ぐことはできません

...

いくつかのコード：

テンプレート

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id"> 
    <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked" :checked="s.active"> 
    <label :for="id">{{ s.display }}</label> 
</div> 

モデルuserOutputSeries

data() { 
    return { 
    userOutputSeries: { 
     foo: { 
     display: 'Awesome Foo', 
     active: true 
     }, 
     bar: { 
     display: 'My Bar', 
     active: false 
     } 
    } 
    } 
} 

ネイティブチェックボックスの伝播を停止するpreventIfLessThanOneCheckedハンドラ

preventIfLessThanOneChecked (event) { 
    // I don't update the model so it stay at the same state 
    // But only need to count the active series and do what we want. 
    console.log(event.target.value, event.target.checked) 
} 

任意のアイデア？

Answer 1

userOutputSeriesデータプロパティへの変更は、チェックボックスの入力に反映されるように、あなたはv-model代わりの:checkedを使用する必要があります。その後

、何activeチェックボックスがない場合、メソッドにv-forからsの参照を渡すとtrueにそのオブジェクトのactiveプロパティを設定します：私はdisabled属性を使用します

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     userOutputSeries: { 
 
     foo: { 
 
      display: 'Awesome Foo', 
 
      active: true 
 
     }, 
 
     bar: { 
 
      display: 'My Bar', 
 
      active: false 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    methods: { 
 
    preventIfLessThanOneChecked(item) { 
 
     if (item.active) { 
 
     return; 
 
     } 
 
    
 
     let items = Object.values(this.userOutputSeries); 
 
     if (!items.find(i => i.active)) { 
 
     item.active = true; 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id"> 
 
    <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked(s)" v-model="s.active"> 
 
    <label :for="id">{{ s.display }}</label> 
 
    </div> 
 
</div>

Answer 2

はあなたの単一確認のチェックボックスにdisabledを使用してみてください：

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id"> 
    <input type="checkbox" :id="id" :value="id" 
     :disabled="(s.active && numberOfChecked == 1) ? disabled : null" 
     @change="preventIfLessThanOneChecked" :checked="s.active"> 
    <label :for="id">{{ s.display }}</label> 
</div>