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>

绑定复选框值，如果存在于另一个数组中

2 个答案: