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}}
      </label>
      <span v-if="selectedCountries.indexOf(country.id.toString()) >= 0">
        <input type="text" v-model="lists[country.id]['name']">
      </span>
    </p>
  </div>
  <ul>
    <li>country data: {{ countries }}</li>
    <li>selected: {{ selectedCountries }}</li>
    <li>lists: {{ lists }}</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"}
      ],
      lists: {
      	"1": {
        	"name": null
        },
        "2": {
        	"name": null
        }
      }
    }
  });