如果綁定複選框值存在於另一個數組中

Question

我有一個返回一些數據的API。

返回的數據是一個對象數組（國家 - 其中不少）。此外，我要回與我擔心

例如

當加載用戶A，我的API返回的所有國家的對象有關聯的國家，並與用戶A相關的國家

因此，我想要做的是將所有國家顯示爲複選框，然後選擇用戶A預先選擇的那些國家。

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

我目前有：

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

但這並不考慮user.countries選擇該數組中的。

有沒有一種簡單的方法來檢查用戶國家是否在國家數組中，並檢查相關複選框？

感謝

Answer 1

這似乎已經奏效：

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

並添加：

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

而另一片段到我的自定義方法，所以都好！

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>