从另一个按钮取消选中 vue 单选按钮

Question

我有一个包含记录列表的表格，每条记录都有两个相关的单选按钮，一个用于确认付款，另一个用于拒绝，当我选择任何一个单选按钮时，我会看到一个带有两个按钮的模式屏幕，一个如果标记了错误的单选按钮，则最终确认付款并取消另一个，我需要的是，当我单击取消按钮时，我最初标记的单选按钮未选中

See Image 1

See Image 2

这是我在 Vue 中的代码：

<v-col class="text-center">                           
                  <span class="radio-registered pt-1 px-1">
                    <input type="radio" 
                    @change="dlgComments = !dlgComments; setUpdateData(1, 2, flt.user_payment_id, flt.payment_amount, flt.pay_date, flt.email, flt.user_name, flt.due_concept, flt.payment_reference, flt.student_due_detail_id); sendInfo(flt), sendInputId(`filter${f}`)" 
                    :name="`filter${f}`" 
                    :checked="false">
                  </span>           
                </v-col>

                <v-col class="text-center">         
                  <span class="radio-rejected pt-1 px-1">
                    <input type="radio" 
                    @change="dlgComments = !dlgComments; setUpdateData(2, 3, flt.user_payment_id, flt.payment_amount, flt.pay_date, flt.email, flt.user_name, flt.due_concept, flt.payment_reference, flt.student_due_detail_id); sendInfo(flt)" 
                    :name="`filter${f}`" 
                    :checked="false">
                  </span>     
                </v-col>
              </v-row>

我对 Vue 比较陌生，不知道应该添加哪个属性。谢谢对不起我的英语！！！

Answer 1

1. 您需要在数据中添加一个键来管理收音机的选中状态，例如“isChecked”：

   data () {
    return {
      isChecked: true,
    }
   }
   

2. 将输入的检查状态绑定到数据属性：

<input type="radio":checked="isChecked">

1. 设置另一个按钮的单击事件以切换/清除检查（取决于您想要做什么）更改数据属性的功能（例如我想切换单选按钮）：

<button @click="toggleCheckedState">Toggle</button>

以及切换状态的功能（在方法中定义）：

methods:{
  toggleCheckedState(){
    this.isChecked = !this.isChecked; //example
    //your logic
  },
}