时间戳

首页 > 解决方案 > 从另一个按钮取消选中 vue 单选按钮

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

问题描述

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

见图 1

见图 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 比较陌生，不知道应该添加哪个属性。谢谢对不起我的英语！！！

标签： vue.jsvuetify.js

解决方案

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

推荐阅读