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">&nbsp; <input v-model.number="typeOfTask" class="form-check-input" type="radio" :value="1" id="defaultCheck1">&nbsp; <label class="form-check-label" for="defaultCheck1">&nbsp; &nbsp; Make this a recurring task&nbsp; </label></div><div class="form-check form-group">&nbsp; <input v-model.number="typeOfTask" class="form-check-input" type="radio" :value="2" id="scheduleCheck">&nbsp; &nbsp; <label class="form-check-label" for="scheduleCheck">&nbsp; &nbsp; &nbsp; Schedule a task&nbsp; &nbsp; </label></div></template><script>&nbsp; export default&nbsp; {&nbsp; &nbsp; data()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; typeOfTask: null, // 1 = recurring, 2 = scheduled&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }</script>