Vue.js Kontrollkästchen nicht mit dem Modell arbeiten, das Laravel SparkForm verwendet

Question

Ich habe die folgenden Kontrollkästchen ein:

<label v-for="service in team.services"> 
    <input type="checkbox" v-model="form.services" :id="service.name" :value="service.id"/> 
</label> 

Diese korrekt angezeigt werden, aber wenn ein Kontrollkästchen markieren sie alle als die form.services erhalten überprüft Modell bekommt auf falsch/wahr gesetzt.

Wenn jedoch das Modell in ein anderes Datenattribut geändert wird, z. "Dienstleistungen" funktioniert alles wie erwartet. Gibt es einen Grund, warum dies in SparkForm nicht funktioniert?

Beispiel Daten:

data: function() { 
     return { 
      form: new SparkForm({ 
       userId: null, 
       services: [] // always only gets set as true/false 
      }), 
      services: [], // works fine 
     } 
    }, 

Answer 1

new Vue({ 
 
    el: '#app', 
 
    data(){ 
 
     return { 
 
     form : { 
 
      services : [] 
 
     }, 
 
     team : { 
 
     services : [ 
 
     { 
 
     "name" : "Service name #1", 
 
     "id" : 1 
 
     }, 
 
     { 
 
     "name" : "Service name #2", 
 
     "id" : 2 
 
     } 
 
     ] 
 
     } 
 
    } 
 
    } 
 
});

<div id="app"> 
 
    <label v-for="service in team.services"> 
 
    <input type="checkbox" v-model="form.services" :value="service.id"/>{{service.name}} 
 
    </label> 
 
{{form.services}} 
 
</div>