JSFiddle - React, Tailwind, and code Playground

by zarutofu

HTML

<div id="sample">
  <div v-for="country in countries">
    <p>
      <label :for="`country_${country.id}`">
        <input type="checkbox" :id="`country_${country.id}`" :value="`${country.id}`" v-model="selectedCountries">
        {{country.name}}
        <span v-if="selectedCountries.indexOf(country.id.toString()) >= 0"> checked! </span>
      </label>
    </p>
  </div>
  <ul>
    <li>country data: {{ countries }}</li>
    <li>selected: {{ selectedCountries }}</li>
  </ul>
</div>
<script src="https://unpkg.com/[email protected]"></script>

JavaScript

var vue = new Vue({
    el: "#sample",
    data: {
      selectedCountries: [],
      countries: [
        { id: 1, name: "Japan"},
        { id: 2, name: "Singapore"}
      ]
    }
  });