[Vuejs]-Binding checkbox values if present in another array

by

0👍

✅

This seems to have worked:

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

And adding:

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

And another snippet to my custom method, so all good!

0👍

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>

Leave a comment