Binding Checkbox-Werte, wenn in einem anderen Array vorhanden

Question

Ich habe eine API, die einige Daten zurückgibt.

Die Daten, die zurückgegeben werden, sind ein Array von Objekten (Länder - nicht wenige davon). Ich bin die Rückkehr auch die mit dem Objekt assoziierten Länder wir

besorgt sind

Zum Beispiel

Wenn Benutzer A geladen wird, meine API all Länder zurückkehren und die Länder mit Benutzern A zugeordnet

Was ich also tun möchte, ist, dass alle Länder als Ankreuzfelder angezeigt werden und dann diejenigen, die Benutzer A als ausgewählt hat.

countries - is an array of objects with an id and name 
user - is an object that contains an array of country objects 

Ich habe derzeit:

<ul class="country-columns"> 
    <li class="control" v-for="country in countries"> 
     <label class="checkbox"> 
      <input type="checkbox" v-model="country.id" v-bind:value="permission.id"> 
      <span>{{ country.name }}</span> 
     </label> 
    </li> 
</ul> 

Aber dies berücksichtigt nicht in die user.countries diejenigen in diesem Array zu wählen.

Gibt es eine einfache Möglichkeit, zu überprüfen, ob sich das Land des Benutzers im Länderfeld befindet, und das entsprechende Kontrollkästchen zu aktivieren?

Dank

Answer 1

Dies funktioniert zu haben scheint:

<ul class="country-columns"> 
    <li class="control" v-for="country in countries"> 
     <label class="checkbox"> 
      <input type="checkbox" v-model="selectedCountries" v-bind:value="{ id: country.id }"> 
       <span>{{ country.name }}</span> 
     </label> 
    </li> 
</ul> 

Und fügte hinzu:

data(){ 
     return{ 
      selectedCountries: [] 
     } 
    }, 

Und noch ein Snippet meiner benutzerdefinierte Methode, also alles gut!

Answer 2

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    countries: [ 
 
     { 
 
     id: 'ua', 
 
     name: 'Ukraine' 
 
     }, 
 
     { 
 
     id: 'en', 
 
     name: 'USA' 
 
     }, 
 
     { 
 
     id: 'af', 
 
     name: 'Afghanistan' 
 
     } 
 
    ], 
 
    permission: ['ua'] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 
<div id="app"> 
 
    <h1>countries</h1> 
 
    <ul class="country-columns"> 
 
    <li class="control" v-for="country in countries"> 
 
     <label class="checkbox"> 
 
     <input type="checkbox" v-model="permission" :value="country.id"> 
 
     <span>{{ country.name }}</span> 
 
     </label> 
 
    </li> 
 
    </ul> 
 
    <h1>permission</h1> 
 
    <ul> 
 
    <li class="control" v-for="item in permission"> 
 
     {{item}} 
 
    </li> 
 
    </ul> 
 
</div>