In Vue, wie wird ein Kontrollkästchen basierend auf einer Bedingung abgebrochen?

Question

Ich möchte immer mindestens ein Kontrollkästchen aktiviert haben, aber ich mische die Konzepte v-model und :checked.

Die doc sagt:

v-model ignoriert die ersten value, checked oder selected Attribute auf alle Formularelemente gefunden. Es wird immer die Vue-Instanzdaten als Quelle der Wahrheit behandeln.

ich mein Modell modifiziert werden, verhindern kann, aber ich das Kontrollkästchen aktiviert ... Einige Code

werden nicht verhindern können:

Die Vorlage

<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> 

Das Modell userOutputSeries

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

Die preventIfLessThanOneChecked Handler

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) 
} 

Irgendwelche Ideen die native Checkbox Ausbreitung zu stoppen?

Answer 1

Sie sollten v-model anstelle von :checked so dass Änderungen an der userOutputSeries Daten Eigenschaft wird in der Checkbox Eingang reflektiert werden.

Dann passieren die s Referenz aus der v-for auf das Verfahren und festgelegt, dass active Eigenschaft auf true des Objekts, wenn es keine active Kontrollkästchen sind:

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

Try disabled auf einzelne geprüft Checkbox:

<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>