el-radio-group 点击后不更新问题备忘

本文详细介绍 Element UI 中 Radio 组件的使用方法,包括如何通过 v-model 进行动态绑定,以及如何监听 Radio 组的选择变化。通过示例代码展示了不同 label 值的 Radio 按钮设置,并解释了在选择变化时如何清空项目商店和设置数组,以及为何需要调用 $forceUpdate 方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        <el-radio-group v-model="obj.type" @change="type_change()"> 
          <el-radio label="1" key="1" border>aaaa</el-radio>
          <el-radio label="3" key="3" border>bbb</el-radio>
          <el-radio label="5" key="5" border>ccc</el-radio> 
        </el-radio-group>

 

type_change: function() {
      console.log(this.obj.type) 

       // 一些处理
       this.project_shops = null

       this.from_sets = []       

       this.$forceUpdate();   //需要加上这句

}

### 如何更新 `el-radio-group` 组件 为了确保 `el-radio-group` 的正常工作以及其内部状态的同步,开发者应当遵循特定的方式来进行组件的状态管理与属性绑定。 当需要动态改变选中的选项时,可以通过双向数据绑定实现。具体来说,通过 `v-model` 指令可以轻松地将当前的选择项与 Vue 实例的数据属性关联起来[^1]。这意味着每当用户交互改变了所选的单选按钮时,对应的模型值也会自动更新;反之亦然——如果程序逻辑修改了该变量,则界面上显示的内容会相应变化。 对于希望手动触发更新的情况(比如响应某些事件),应该利用 Element UI 提供的 API 方法或监听器来操作。例如,在父级组件中定义好处理函数并传递给子组件作为 prop 属性之一,这样可以在适当的时候调用这些回调从而达到刷新视图的目的[^2]。 另外值得注意的是,由于 `el-radio-group` 和它里面的各个 `el-radio` 是紧密联系在一起工作的整体结构,因此任何针对组内成员的操作都可能影响到整个群组的行为表现。所以在编写代码时要特别小心,确保会破坏原有的功能特性。 ```html <template> <div id="app"> <!-- 使用 v-model 将 value 变量和 el-radio-group 关联 --> <el-radio-group v-model="value"> <el-radio :label="3">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio> </el-radio-group> {{ value }} </div> </template> <script> export default { data() { return { value: 3, // 初始默认选中第一个radio }; }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值