Vue/Bootstrap 复选框，一次只能选中一个

Question

我的 Vue 模板中有两个复选框：<div class="form-check form-group">        <input v-model="isRecurringTask" class="form-check-input" type="checkbox" value="" 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="isScheduledTask" class="form-check-input" type="checkbox" value="" id="scheduleCheck">        <label class="form-check-label" for="scheduleCheck">Schedule a task</label>    </div>它们都可以正常工作并正确调用它们的功能，但是我应该如何正确制作它以便一次只能检查一个？我想用 Vue 以最合适的方式做到这一点

Answer 1

您必须对v-model属于同一组的所有单选按钮使用相同的按钮 - 并为它们提供不同的值：

<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>