el-checkbox / el-checkbox-group中绑定对象无法回显的问题处理

news2024/11/18 1:51:36

 在使用el-checkbox / el-checkbox-group时,发现若label绑定的是对象,则是无法回显的,参考了很多方法,但大多都无法解决,最终参考下面的方法解决,记录一下。

<el-checkbox :label="JSON.stringify(item)" class="mb10" v-for="(item, key) in state.sizes" :key="item.id" size="large" border>
<template #default>
<p class="mb10"> {{item.title}}</p>
<p class="mb10"> {{item.px}} px</p>
<p> {{item.size}} mm</p>
</template>
</el-checkbox>

参考:el-checkbox绑定Object/Array解决方法(同附el-checkbox-group解决方法)_el-checkbox绑定对象_奈登里的博客-CSDN博客el-checkbox如果绑定不为string / number / boolean时,是无法回显的。而在获取参数对绑定参数进行JSON.stringify转换即可解决回显问题,如若在提交时保持数据结构一致,则再进行JSON.parse转换即可。同时该操作也可同用于el-checkbox-group如有疑问,欢迎讨论......_el-checkbox绑定对象https://blog.csdn.net/weixin_42534421/article/details/125504304?spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-125504304-blog-126431958.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-125504304-blog-126431958.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=25

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/730122.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每天一点Python——day51

#第五十一天列表和字典为可变序列&#xff0c;元组是不可变序列 为什么要将元组设计成不可变序列呢&#xff1f; 一旦创建了不可变类型的对象&#xff0c;对象内部的所有数据将不能被修改 这样就避免了由于修改数据而导致的错误 对于不可变对象&#xff0c;在多任务环境下&…

最小覆盖串双指针解题思路及Java实现

最小覆盖串双指针解题思路及Java实现 题目双指针思路Java实现 题目 题目来自牛客NC28 最小覆盖子串 给出两个字符串 s 和 t&#xff0c;要求在 s 中找出最短的包含 t 中所有字符的连续子串。 例如&#xff1a; 输入&#xff1a;“XDOYEZODEYXNZ”,“XYZ” 返回值&#xff1a;“…

使用LiteSpeed缓存插件将WordPress优化到100%的得分

页面速度优化应该是每个网站所有者的首要任务&#xff0c;因为它直接影响WordPress SEO。此外&#xff0c;网站加载的时间越长&#xff0c;其跳出率就越高。这可能会阻止您产生转化并为您的网站带来流量。 使用正确的工具和配置&#xff0c;缓存您的网站可以显着提高其性能。因…

c++——命名空间

1.什么是命名空间 1.1命名空间的定义 命名空间&#xff08;Namespace&#xff09;是C中用来避免命名冲突的一种机制。命名空间可以将一组相关的函数、类、变量等定义在同一个逻辑分组中&#xff0c;从而避免它们与其他代码中的同名实体发生冲突。 C中&#xff0c;命名空间使用…

Openlayers实战:回显点、线段、圆形、多边形

Openlayers地图中,回显数据到地图上,形成几何图形是非常重要的一部分学习内容。 回显的内容基本单元包括点、线、圆形、多边形。本实战项目中,根据给定的坐标点,用最基础最管用的方式来显示这些信息。 效果图 源代码 /* * @Author: 大剑师兰特(xiaozhuanlan),还是大剑…

Keil环境下CANopenNode移植到STM32问题记录(一)---printf重定向问题

文章目录 问题描述问题结决思考&#xff1a;相关文章 在直接将CANopenSTM32的示例工程直接移植到Keil环境下。 如果移植工程未实现printf函数重定向&#xff0c;则要注释掉log_printf下面的printf函数&#xff0c;使日志打印失效 /* Printf function of CanOpen app */ #define…

Django_环境配置(一)

目录 一、安装Django 二、创建项目 三、创建应用 四、注册应用 五、使用mysql数据库 六、视图 七、开发服务器 源码等资料获取方法 一、安装Django # 在CMD中运行 pip install django # 查看djangp版本 python manage.py version 二、创建项目 # 在CMD中运行 django-a…

工业物联网安全监测解决方案:工业安全节能管理

工业自动化和工业化的快速发展&#xff0c;工厂安全问题越来越受到重视。工厂安全监测是保障工厂安全运行的关键技术之一&#xff0c;它可以及时发现并处理潜在的安全问题&#xff0c;防止事故的发生&#xff0c;保障员工的安全和工厂的正常运转。智能改造成为广大企业关注的热…

idea配置本地maven保姆级教程

一、说在前面 idea默认会带有maven插件&#xff0c;原则上是可以不需要配置的。但有个缺点&#xff0c;他是把本地仓库直接安装在了系统盘里面&#xff0c;随着时间的推移&#xff0c;仓库越来越大&#xff0c;笔记本的压力会比较大。 本文是下载自己的maven包&#xff0c;集…

DAY41:动态规划(一)动态规划理论基础

文章目录 DP概念以及和贪心的区别动规问题分类基础问题背包问题打家劫舍股票问题子序列问题 DP注意点解题步骤&#xff1a;五步debug考虑方向 视频课程&#xff1a;从此再也不怕动态规划了&#xff0c;动态规划解题方法论大曝光 &#xff01;| 理论基础 |力扣刷题总结| 动态规划…

3.1.cuda运行API-概述

目录 前言1. Runtime API概述总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习精简 CUDA 教程-Runtime API 概述 课程大纲可…

MachineLearningWu_3_LinearRegression

3 Linear Regression Linear Regression即是根据数据做出预测&#xff0c;如下&#xff0c; training set 如下&#xff1a; 在Linear Regression中你可以将(x&#xff0c; y)看做如下&#xff0c;每一行是一个sample&#xff0c;而每一列除最后一列是一个feature&#xff0c…

ESP32(掌控板) RGB灯控制

ESP32&#xff08;掌控板&#xff09; RGB灯控制 本程序实现了RGB灯亮度和颜色调节&#xff0c;通过触摸按键分别调节RGB值&#xff0c;通过机械按键选择要调节的灯或使用预设均通过调整变量的值加上判断实现。预设包含随机颜色和流水灯&#xff0c;各有高亮度和低亮度两种版本…

《Kali渗透基础》07. 弱点扫描(一)

kali渗透 1&#xff1a;漏洞发现1.1&#xff1a;Exploit-DB1.2&#xff1a;searchsploit1.3&#xff1a;nmap 2&#xff1a;漏洞管理3&#xff1a;弱点扫描类型4&#xff1a;漏洞基本概念4.1&#xff1a;CVSS4.2&#xff1a;CVE4.3&#xff1a;OVAL4.4&#xff1a;CCE4.5&#…

TCP概念

文章目录 1.TCP1.1 为什么需要 TCP 协议&#xff1f;TCP 工作在哪一层&#xff1f;1.2 什么是 TCP &#xff1f;1.3 什么是 TCP 连接&#xff1f;1.4 如何唯一确定一个 TCP 连接&#xff1f;1.5 有一个 IP 的服务器监听了一个端口&#xff0c;它的 TCP 的最大连接数是多少&…

nginx的权限问题(13: Permission denied)解决办法

1、查看nginx启动用户和使用用户是否一致 ps aux | grep nginx 如图&#xff1a; 一个是www,一个是root用户 2、打开nginx配置文件 打开 nginx.conf 文件 查找nginx.conf的位置 ps -aux | grep nginx 3、把 nginx 改为 root 4、重启nginx服务 service nginx restart …

性能监控平台 | Prometheus+InfluxDB + Grafana!

在本文中&#xff0c;我将把几个常用的监控部分给梳理一下。前面我们提到过&#xff0c;在性能监控图谱中&#xff0c;有操作系统、应用服务器、中间件、队列、缓存、数据库、网络、前端、负载均衡、Web 服务器、存储、代码等很多需要监控的点。显然这些监控点不能在一个专栏中…

USG6000V 防火墙的策略应用

将G1/0/0划入TRUST区 firewall zone trustadd interface GigabitEthernet1/0/0 将G1/0/1划入UNTRUST区 firewall zone untrustadd interface GigabitEthernet1/0/1在防火墙上配置放行策略 security-policyrule name 1source-zone trustdestination-zone localdestination-z…

2023年船舶、海洋与海事工程国际会议(NAOME 2023) | Ei Scopus双检索

会议简介 Brief Introduction 2023年船舶、海洋与海事工程国际会议(NAOME 2023) 会议时间&#xff1a;2023年10月20日-22日 召开地点&#xff1a;中国镇江 大会官网&#xff1a;NAOME 2023-2023 International Conference on Naval Architecture and Ocean & Marine Engine…

Yolov8方法笔记

目录 1、安装yolov8的虚拟环境 &#xff08;1&#xff09;创建虚拟环境 &#xff08;2&#xff09;安装pytorch ​编辑 2、下载yolov8模型 3、解压缩&#xff0c;解压后的文件 4、将转换数据集&#xff08;以口罩检测为准&#xff09; 5、配置和执行 6、验证 7、测试 1、…