checkbox array values

by jorgeluis

HTML

<script src="https://unpkg.com/vue@2"></script>
<div id="app">


<form>

  <h1>Vue: Binding checkboxes to arrays</h1>

  <div class="group">
    <h3>
    Simple string array
    </h3>
    <label v-for="name in names" :key="name">
      <input type="checkbox"
        :value="name"
        v-model="checkedNames"> {{name}}
    </label>
    <p>Checked names: {{ checkedNames }}</p>
  </div>

  <div class="group">
    <h3>
    Object array
    </h3>
    <label v-for="obj in objs" :key="obj.name">
      <input type="checkbox"
        :value="obj.name"
        v-model="checkedObjNames"> {{obj.name}}
    </label>
    <p>Checked names: {{ checkedObjNames }}</p>
  </div>


</form>


</div>

CSS

#app {
  padding: 1rem 2rem;
}

.group { margin-bottom: 2rem; }

JavaScript

const example = {
	data() {
		return {
	    names: ['Mercury', 'Venus', 'Earth', 'Mars', 'Saturn', 'Jupiter', 'Uranus', 'Neptune'],
    	checkedNames: ['Mercury', 'Venus'],
	    objs: [
      { name: 'Mercury'},
      { name: 'Venus' },
      { name: 'Earth' },
      { name: 'Mars' },
      { name: 'Saturn' },
      { name: 'Jupiter' }
      ],
    	checkedObjNames: ['Mercury', 'Venus'],
		}
	},
	methods: {
  	isSelected (name) {
      return this.names.indexOf(name) > -1
    },
		makeRequest () {
    	this.isLoading = true

			setTimeout(_ => {
      	this.isLoading = false
      }, 3000)

		}
  }
}

const app = new Vue(example)
app.$mount('#app')