[Vuejs]-Vue/Bootstrap checkboxes, limit to only one checked at a time

by

0👍

You have to use the same v-model for all radio-buttons which belong to the same group – and to give them distinct values:

<template>
<div class="form-check form-group">
  <input v-model.number="typeOfTask" class="form-check-input" type="radio" :value="1" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Make this a recurring task
  </label>
</div>

<div class="form-check form-group">
  <input v-model.number="typeOfTask" class="form-check-input" type="radio" :value="2" id="scheduleCheck">
    <label class="form-check-label" for="scheduleCheck">
      Schedule a task
    </label>
</div>
</template>

<script>
  export default
  {
    data()
    {
      return {
        typeOfTask: null, // 1 = recurring, 2 = scheduled
      }
    }
  }
</script>

0👍

I think you asking for this example:

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
  el: "#app",
  data: {
  	radios: [
    	{ value: 'isRecurringTask', label: 'Make this a recurring task' },
      { value: 'isScheduledTask', label: 'Schedule a task' }
    ],
    radioSelected: null
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="app">
  <div     
    v-for="inputRadio in radios"
    class="form-check form-group"
  >
    <input 
      class="form-check-input" 
      v-model="radioSelected"
      type="radio" 
      :value="inputRadio.value" 
      :id="inputRadio.value"
    >
    <label 
      class="form-check-label" 
      :for="inputRadio.value"
    >
      {{ inputRadio.label }}
    </label>
  </div>
  the current input radio value selected is: {{ radioSelected }}
</div>

Leave a comment