Radio Buttons

by Emma Bishop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="app">
  <h3>
      Selected gender_id: {{gender_id}}
  </h3>
  <div class="form-group">
      <label>Gender:</label>
      <div>
          <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-outline-secondary" :class="gender_id === Number(key) ? 'active': ''" v-for="(gender, key) in genders" :key="key">
                  <input type="radio"
                      class="btn-group-toggle"
                      name="gender_id"
                      :id="'gender_' + key"
                      :value="key"
                      autocomplete="off"
                      v-model.number="gender_id">
                  {{ gender }}
              </label>
          </div>
      </div>
  </div>
</div>

JavaScript

new Vue({
	data () {
      return {
          genders: {
              1: "Men's",
              2: "Women's"
          },
          gender_id: null
      }
  },
  
}).$mount('#app')