12. Checkboxes

A set of checkboxes with same v-model will act as a group with the value added to the v-model list if seleced.

Here the v-model list in col, is used to create a string colors.

This is App.vue file:

<template>
  <div>
    <fieldset>
      <legend>Colors used</legend>
      <label>Red</label>
      <input type="checkbox" v-model="col" value="Red">
      <label>Green</label>
      <input type="checkbox" v-model="col" value="Green">
      <label>Blue</label>
      <input type="checkbox" v-model="col" value="Blue">
    </fieldset>
    <h2>Colors:</h2>
    <h2>{{colors}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      col: []
    }
  },
  computed: {
    colors: function() {
      return this.col.join(", ");
    }
  }
}
</script>

<style>
input {
  background-color: #EEE;
  color: #111;
  display: block;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

This is the output: