13. Radio Buttons

A set of radiobuttons with same v-model will act as a group with the value added to the v-model string of whichever button is seleced.

Here the v-model string is col, which is then printed.

This is App.vue file:

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

<script>
export default {
  data() {
    return {
      col: "Red"
    }
  }
}
</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: