Vue.js: Set Kontrollkästchen aktiviert, wenn Aussage wahr

Question

ist hatte ich folgendes Checkbox in meinem alten Lenker Ansicht:

<div class="form-group"> 
    <input type='checkbox' name='xmlOnline[]' value="stepstone" class='' {{#if (ifIn 'stepstone' job.xmlOnline)}} checked="checked" {{/if}}> Stepstone 
    <input type='checkbox' name='xmlOnline[]' value="karriere" class='' {{#if (ifIn 'karriere' job.xmlOnline)}} checked="checked" {{/if}}> Karriere 
</div> 

Also, wenn job.xmlOnline „Stepstone“ als Wert hat, sollte sie es markieren, wie geprüft . Gleiches gilt für "karriere".

Jetzt versuche ich das gleiche in Vue.js für meine POST-Formular zu erreichen. So sieht das Objekt "job" aus: http://t2w-api.herokuapp.com/jobs/590c20d42b1c4300046bb1b9

So kann es entweder "karriere", "stepstone", beides oder "null" enthalten.

Was ich bisher in meiner Komponente bekam:

<div v-for="(xml, index) in job.xmlOnline"> 
    <input type="checkbox" :checked="xml == 'stepstone'"> Stepstone {{ index }} 
    <input type="checkbox" :checked="xml == 'karriere'"> Karriere {{ index }} 
</div> 

Ankreuzfelder erhalten überprüft, aber ich habe sie verdoppelten. Ich weiß auch nicht, wie man ein V-Modell hinzufügt.

Dies ist die Quelle meiner Komponente. Hat etwas ähnlich mit "Qualifikationen"/"Verantwortung": https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobEdit.vue

Answer 1

Eine mögliche Lösung

<input type="checkbox" 
     :checked="job.xmlOnline && job.xmlOnline.includes('stepstone')" 
     @change="onChange('stepstone', $event)"> Stepstone 
<input type="checkbox" 
     :checked="job.xmlOnline && job.xmlOnline.includes('karriere')" 
     @change="onChange('karriere', $event)"> Karriere 

Und die onChange Methode

methods:{ 
    onChange(value, $event){ 
    if (!this.job.xmlOnline) 
     this.job.xmlOnline = [] 

    const index = this.job.xmlOnline.findIndex(v => v == value) 
    const checked = $event.target.checked 

    if (checked && index < 0) 
     this.job.xmlOnline.push(value) 
    if (!checked && index >= 0) 
     this.job.xmlOnline.splice(index, 1) 
    } 
} 

Example.