Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题

最新推荐文章于 2024-04-29 03:08:36 发布
最新推荐文章于 2024-04-29 03:08:36 发布
阅读量2.4k 收藏
点赞数
分类专栏： # vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liming1016/article/details/111264802
版权

原因：这是 vue 的深入响应式原理，官方说法和解决方法：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)

 

解决办法： 在index.vue中获取数据，放在vuex中    然后在组件中的data属性上去获取该数据

<el-checkbox v-model="item.checked" :label="item.label" v-for="(item,key,index) in checkOptions" :key="item.value"></el-checkbox>
checkOptions: this.$store.state.checkOptions,

 

江湖行骗老中医
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
前言 最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如： 定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList，这个就是动态生成的表单数据 v-for 循环 checkList，得到 key，然后直接 v-model=“form.key” 动态生成 form 里面的 key <el-
vue+element-ui DateTimePicker组件分钟设置步长step
最新发布
05-17
DateTimePicker是Element-UI中用于日期和时间选择的组件，它结合了DatePicker和TimePicker的功能，允许用户在同一个界面上选择日期和时间。在某些场景下，我们可能需要自定义时间选择的精度，例如，我们不希望用户...
解决 Vue 动态生成 el-checkbox 点击无法赋值问题
蜗牛
12-15 1818
最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如： 定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList，这个就是动态生成的表单数据 v-for 循环 checkList，..
vue动态加载checkbox不能勾选
qq_36022463的博客
02-11 1325
引用：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 element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据_vue elementui table实现动态勾选计算某一列的值
2401_84434331的博客
04-29 426
【代码】VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据_vue elementui table实现动态勾选计算某一列的值。
使用el-checkbox实现全选，点击失效没有反应
weixin_33966365的博客
10-23 2261
最近在公司接收到了一个需求，给收藏夹的书籍添加批量、全选删除实现思路：点击全选改变item的checked，改变item的checked，重新便利一下所有item的checked来改变全选的selectAll1）该组件基本功能已经实现，checkbox用的vant-ui，苦于官网没有这样功能的demo，我按照上面的思路实现，但头疼的是他只...
ElementUI中Checkbox复选框点击一个导致全选和点击复选框没有效果的问题解决
Huathy的博客
08-16 3943
在返回数据的时候也要注意是Array格式，如果数据库是用逗号分隔的。官方文档指出：el-checkBox-group的属性必须是Array类型。
el-checkbox点击没反应
I'm your wrong princess
10-23 6435
el-checkbox点击没反应 解决思路： <el-checkbox-group v-model="userid"> <el-checkbox v-for="item in userlist" :key="item.name" :label="item.name" @change="AAA(userid)"> </el-checkbox&g...
解决elementUI中使用checkbox无法选中的问题
简单点的博客
01-21 2266
解决elementUI中使用checkbox无法选中的问题
使用elementUi—el-checkbox无法正确动态设置勾选状态的问题
今天也要加油呀
07-17 5767
<el-checkbox v-if="scope.row.permissionName=='xxx'" class="parentCheckbox" v-model="scope.row.checked" :checked="scope.row.status=='是'" :indeterminate="scope.row.indeterminate" @change="onChangeMenuTop(scope.row,scope.$index,$event)">.
Vue 中的Element-ui 组件el-checkbox动态赋值更改选中状态
热门推荐
qq_33317437的博客
07-11 2万+
Vue 中的Element-ui 组件el-checkbox动态赋值的问题 vue中修改checkbox的选中状态是不会实时更新的。看到一个方法，亲测有效。加个v-if=‘table’ ,重新渲染一下表格就好了 <el-table :data="sceneData" v-if="table"> <el-table-column prop="name" label...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
el-table是Element-UI中的表格组件，它可以展示多行多列的数据。在动态表单验证场景中，el-table常用于展示和编辑表单数据。通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行...
a-checkbox-group 赋值后不能点击问题
hy_ethel的博客
10-15 2973
问题： 编辑时，多选框会默认赋值，在重新选择后，打印的数据为新数据，但页面上选值没有变。 <a-checkbox-group v-model="data.channel" :options="plainOptions" @change="onCheckboxChange" /> 如图： 解决： v-model 是二级字段，修改 v-model 为一级字段可解决，即 v-model="data.channel" 修改为 v-model="channel" ，然后在 onCheckbo
el-checkbox绑定动态数据发现第一次点击无效，第二次点击才有效
白日梦想家
04-26 4042
el-checkbox绑定动态数据发现第一次点击无效，第二次点击才有效 先看一下后端传递的值，为了方便前端勾选，特地让后端加了一个isSelected属性，并初始化为false，但不知道传递过来的是false是String对其会有什么影响，可能是这个原因。 代码 <template> <div v-for="(customer, index) in customerList" :key="index"> <i type="info"><i cl
el-table 自定义表头checkbox失效问题
oTianKongLan123的博客
01-21 2139
<el-table-column prop="name" label="是否过滤" width="180" > <template slot-scope="scope"> <el-checkbox v-model="scope.row.isFilter" :disabled="dataForm.infoFlag"> </el-checkbox>.
el-checkbox参数动态设置，el-checkbox-group动态设置v-model，未勾选成功。
qq_39037897的博客
03-02 2278
1.<template> <el-checkbox-group v-model="ruleForm.values" class="m-el-checkbox-group" > <el-checkbox v-for="item in list" :label="item.key" :key="item.key"
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江湖行骗老中医

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值