vue循环出来的radio单选框，用函数给单选框赋默认值，出现单选框点击无响应的情况

最新推荐文章于 2024-01-11 21:15:51 发布
最新推荐文章于 2024-01-11 21:15:51 发布
阅读量5.3k 收藏 3
点赞数
分类专栏： 前端笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littlebearGreat/article/details/80524604
版权

项目中，从后台拿数据，根据数据来渲染dom，渲染出的radio单选框要赋默认值，然后在methods中写了个赋值函数，最后出现点击单选框无响应的现象。

浪费了好多时间，原来是我方法错误。

正确的方法不能直接给单选框的选择值赋值，而是要使用Vue.set()方法。如下


littlebearGreat
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 实现单选框设置默认选中值
12-30
vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <input class=radio type=radio name=radios :value=i v-model=radio /> 生成后的代码就是 <input class=radio type=radio name=radios value=0 v-model=rad
vue radio单选框,获取当前项(每一项)的value值操作
01-18
前言 本文使用了lable关联选中，实际使用中如果不需要，直接将循环语句 v-for 写在 input标签上就可以 1、使用v-for循环的radio单选框 01）需要注意的是，这是使用的是 change 事件，而不是 click 点击事件 <template> <div> <label v-for=(item, key=index> <input type=radio v-model=radioVal :value=item.value @change=getRadioVal
三种取消选中单选框radio的方法
12-09
本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。 <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> [removed] [removed] [removed] $(function(){ // var $br
Vue学习笔记3 - Vue中 radio/select 如何设定初期值
shi_ly的专栏
05-09 665
使用v-model 做双向绑定
vue3 ts element plus form表单二次封装详细步骤 （附参数、类型详细介绍及简单使用示例）
前台端水师的博客
08-10 1万+
上篇table 表格封装 讲到项目中经常会用到 table 表格，所以做了封装。当然，form 表单使用的频率依然很高，所以和封装 table 表格的思路相似，对 form 表单也做了一个二次封装的组件。 Form 表单组件封装 2. 基本表单使用 3. 自定义 key 4. 自定义表单验证 表单配置项， 参数请参考下面参数介绍 参数类型声明(声明为全局的类型，方便使用) 参数介绍 Form 属性 参数 说明 类型 是否必填 默认值 model 表单数据对象 Record...
vue input type=“radio“ 动态赋值
weixin_45281571的博客
02-06 3005
vue 页面 <input type=“radio” style=“zoom: 205%;” name=“pay” :value=“item.name” v-model=“radio” @click=“confirm” /> {{item.name}} js方法 data() { return { radio: ‘A’, //单选按钮默认值 prefixName: [ //集合 { name: “A”, }, { name: “B”,
vue中radio、select设置默认选中
qq_26993175的博客
12-15 3978
radio默认选中： <span v-for="(item,index) in refArray"> <input type="radio" name="inspectionRef" v-bind:value="item.id" v-model="defaultInspectionRef" class="radio"/>{{item.name}} </span> self.defaultInspectionRef = 默认选中的value; select默认选中：
vue3中使用el-checkbox-group回显后无法重新勾选或取消问题解决
wed2019的博客
10-10 3692
仅记录个人工作中碰到的一些小问题，网上搜了很多，答案五花八门，没有能帮到我的，无意之间发现了一篇类似的帖子，遇到的情景和我有些相似，我试着改造后引入我的代码中，发现成功解决，以此来写这篇博客，希望能帮到有需要的人。推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。在vue3中，首先引入nextTick，这时候再去操作复选框组，发现可以操作了。nextTick 是将。vue2中也是同理，
vue动态加载checkbox不能勾选
qq_36022463的博客
02-11 1283
引用：https://blog.csdn.net/yujin0213/article/details/88313154 在遍历的这个数组添加一个checked属性，为false，和v-model绑定 this.participant.map(item=>{ item.checked = false }) <el-checkbox-group v-model="glht.cytl" style="display:inline-block">
vue radio单选框，获取当前项的value值并给后台传值（自测可用）
刺心的博客
10-16 8915
话不多说，直接上代码： <label v-for="(item,index) in radioData" :key="index"> <input type="radio" :value="item.value" @click="getRadioVal(item.value)"> {{item.value}} </label>...
通过依赖注入进行组件中传值（vue3+ts)
like_a_diamond的博客
12-08 515
vue+ts 通过依赖注入进行组件传值
vue3+ts+vite+element plus 实现table勾选、点击单行都能实现多选
flhhly的博客
12-13 741
需求：table的多选栏太小，点击的时候要瞄着点，不然选不上，要求实现点击单行实现勾选。
Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题
最新发布
技术前端，忠于热爱 @0.活在风浪里
01-11 1816
VUE3+TS+Element-Plus项目实战，封装日常表格、表单，设计思路
vue2基础知识
weixin_45173160的博客
09-12 168
vue2 的一些基础知识
解决vue3.0+vant 表单元素 Radio 单选框 无效问题
weixin_38808271的博客
03-21 4813
解决vue3.0+vant 表单元素 Radio 单选框 无效问题
vuejs踩坑记录：element ui 表单回显 radio 动态赋值无效果的问题
南北极之间
02-21 4384
对于动态赋值的Element-ui-radio要使用动态绑定赋值给label 也就是冒号赋值：
【ElementUI】【Vue】el-Radio失效，无法切换选中效果
陶洲川的博客
02-26 9238
一、问题 1.1、环境 电脑环境：Windows 10； 开发工具：IntelliJ IDEA； 数据库环境：Redis 3.2.100 JDK环境: Jdk1.8； 1.2、问题 【Vue】【ElementUI】为什么使用el-radio 标签失效？ 使用el-radio标签，点击图中的【审核不通过】圆形单点框，没有反应，还是默认选中【审核通过】。 二、解答 1、这里有个坑，就是ElementUI和Vue.js框架配合使用的时候，不支持连点。 错误方法： //3 审核 reviewSys
vue radio单选框，获取当前项（每一项）的value值
热门推荐
好巧的博客
12-24 3万+
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。本文使用了lable关联选中，如果不需要，直接将循环语句 v-for 写在 input标签上即可。注意：需使用 change 事件，不是 click 事件。注意：需使用 change 事件，不是 click 事件。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
vue循环多个单选框
07-28
回答: 在Vue循环生成的多个单选框中，可以通过添加一个label元素来调整单选框的样式。首先，需要将input元素的display属性设置为none，以隐藏它。然后，通过调整label元素的样式来实现自定义的单选框样式。可以设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值