v-model绑定的数据与接收到的数据类型不一致引发的bug

news2024/11/25 12:30:06

在使用v-model的过程中 当页面渲染需要的数据类型与data中定义的数据类型不一致时,页面是不会进行响应式对应渲染的、

如:1:绑定的是string的时候,在定义时是number类型 也会导致页面不更新
2:列表下拉框的选中的数据若定义的是number的话,传递进去string也是不会进行渲染的

场景:前端开发的时候定义了el-select的下拉值是number类型,请求接口回来的数据是string类型,未做任何转换的情况下el-select不会默认勾选对应项。

解决思路:视图不更新,请看数据 ====>数据=(数据类型+数据值)

当v-model绑定的值是条件渲染的时候,请用v-if,而不是v-show?
为什么呢?
这里涉及到v-if会重新构建节点,而v-show只是利用css的思想去重新控制页面数据的显示与隐藏 没有涉及到节点的重新构建

bug:
v-model绑定的值条件渲染的时候采用了v-show去控制,但是由于定义的初始值是string类型(因为一个value在页面中对应了多种情况),而我们获取到的数据类型是Array
类型,由于我们通过v-show 去控制页面显示隐藏,此时因为数据类型不一致 通过父组件传递给子组件的时候 子组件接收到数据时会变成0,不是我们响应的结果
错误代码示例:
定义的value数据类型非数组
1:初始定义的
在这里插入图片描述
2:渲染的是数组类型;通过v-show去控制显示隐藏
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/74b67a92d66b44acb0200e42512656ff.png
接收到的
在这里插入图片描述
上面bug产生了
为什么父组件数据正常,子组件数据变了呢?是代码中哪个方法将数据改了吗 找了很久,也没有发现有方法将其改了呀!!!
百思不得其解,问题出在哪?

会到最初:vue是数据驱动视图,但是可以通过v-model实现view-data(视图到数据的双向绑定)
因为我们用了v-model,那么是我们的视图的渲染过程中带动了数据的变化,这里用v-show就导致了节点不会重新加载,我们最初定义的是什么,接收到的与最初不一致的情况下,页面默认是采用最初的数据类型 ,将value重置成了null.

解决思路:1:初始定义的数据类型和接收的必须保持一致 可以用v-show去控制渲染
2: 当同一个字段不同条件对应不同类型的时候请用v-if去代替v-show

解决一个问题不是最终的目的 ,而是解决问题背后所应用的思想

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

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

相关文章

静电接地桩的使用和维护

静电接地桩,也称为静电防护接地桩或静电消散接地桩,是一种用于防止静电积聚和降低电荷积聚的设备。它主要通过将静电荷导引到地下,实现静电的释放和中和。 静电接地桩通常由导电材料制成,如铜、铝等金属材料。它们通常以垂直方式…

目标追踪的方向分析

方向分析 目标运动方向分析的一种最常用方法是光流法,光流法通过相邻两帧图像中光流近似目标的运动。光流法比较适于估计较短时间内的目标运动趋势(如相邻几帧),且光流法对图像噪声非常敏感,如下图,为…

矩阵AB和BA的特征值相同

手写的,如下图: 即可证明,矩阵AB的特征值和BA的特征值相同。 关于矩阵转置和逆矩阵混合运算,有如下规律:

Ubuntu关闭自动休眠

一、查看当前休眠模式 使用systemctl status sleep.target 命令查看当前休眠模式,结果如下图,sleep状态为enabled,表示自动休眠模式开启。 二、关闭自动休眠模式 使用sudo systemctl mask sleep.target suspend.target 关闭休眠模式 三…

力扣算法数学类—最大交换

目录 最大交换 题解: 代码: 最大交换 670. 最大交换 - 力扣(LeetCode) 给定一个非负整数,你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7。 …

没看完这篇文章,别说你会用WBS

大家好,我是老原。 为什么很多人明明有了很多工具和方法,还是做不好工作? 有没有想过,什么样的人才是“会工作“ 的人? 罗振宇在启发俱乐部里,对“会工作”做了一个解释。 “会工作的人,就是…

一种自平衡解决数据倾斜的分表方法

1、背景 这篇主要描述了B端令牌系统应用数据分表解决业务数据量增大,且存在的数据倾斜问题,主要面向的场景是一对多数据倾斜问题 1)B令牌的业务背景 先简述一下B令牌的业务背景,B令牌系统是用于营销场景中,将许多用…

写给后端开发的『vue3』请求后端接口

本文分享一下在vue3前端项目中请求后端接口获取数据。比较简单,内容如下: 1、使用axios请求后端接口 首先npm install axios,添加axios依赖,就靠它来请求后端接口了,基本等同于使用jquery发ajax。 # src/main.js i…

制作Ubuntu20.04系统盘教程

下载ios系统镜像:http://releases.ubuntu.com/20.04/ 下载启动盘制作工具:http://rufus.ie/downloads/ 安装后,在如下软件界面进行U盘系统的写入:

strcmp函数和strncmp函数【C语言】

strcmp函数和strncmp函数 strcmp函数一、strcmp函数的简介二、strcmp函数的功能三、strcmp函数的使用四、strcmp函数的模拟 strncmp函数一、strncmp的简介二、strncmp函数的功能三、strncmp函数的使用 strcmp函数 一、strcmp函数的简介 strcmp函数在库函数中的定义&#xff1…

STM32 ADC基础知识讲解

文章目录 前言一、ADC的基本介绍二、STM32 ADC讲解1.ADC分辨率2.ADC通道讲解3.ADC转换模式单次转换模式连续转换模式 4.扫描模式5.数据对齐方式左对齐右对齐 总结 前言 在正式的学习如何编写ADC代码时我们先来学习一下ADC的基础知识部分,只有掌握好了这些基础知识才…

打造i-SMART智能网联平台,亚马逊云科技助力上汽快速出海

当前在各大外资车企不断加码在华投资之际,越来越多的中国汽车品牌纷纷开始走出国门,加速推进全球化业务,将赛道转至更为广阔的海外市场。 上汽海外出行科技有限公司(简称“上汽海外出行”)成立于2018年,承…

华为OD机试真题 Java 实现【挑选字符串】【2023 B卷 100分】,附详细解题思路

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷)》。 刷的越多,抽中的概率越大,每一题都有详细的答题…

vue的生命周期和执行顺序

1,Vue 生命周期都有哪些? 序号生命周期描述1beforecreate创建前vue实例初始化阶段,不可以访问data,methods; 此时打印出的this是undefined;2created创建后vue实例初始化完成,可以访问data,meth…

postgresql部署及优化

目录 一、postgresql概念 二、PostgreSQL 特征 三、postgres安装与登录 3.1、postgres安装 3.2、postgres使用 3.3.1、postgres登录 3.3.2、修改postgres用户密码 四、PostgreSQL 命令 4.1、PostgreSQL 创建数据库 4.2、删除数据库 4.3、创建表格 4.4、删除表格 一、…

Bard:Google AI的下一代语言模型,支持多语言、语音朗读、图片解析和更多

说起时下火爆的生成式AI,并不是只有ChatGPT。Bard也是一个很优秀的产品,并且刚刚发布的很多有趣的新功能。文末告诉你如何访问Bard。 Google AI在最近的更新中发布了Bard,一个新的语言模型。Bard支持多种语言,包括中文&#xff0…

Hadoop和hive一键启动脚本

#!/bin/bashcd $HADOOP_HOME/sbinsh ./start-all.shcd $HIVE_HOME/binnohup hive --service metastore & 停止hadoop服务 #!/bin/bashcd $HADOOP_HOME/sbinsh ./stop-all.sh 停止hive服务

Stability AI 把绘画门槛打为 0!

本文由 GPT- 4 所创作,配图由 Stable Doodle 生成。 编者按 Stability AI 上新了! 其收购的 Clipdrop 发布了全新的 Stable Doodle 工具,我在使用后最为直观的感受就是 —— 把绘画门槛打下来了。 在 Stable Doodle 之前,使用各…

大型企业数字化信创论坛启幕,金蝶携手500强企业论道数字化变革!

7月14日,“数字中国第二届大型企业数字化信创论坛”在数字化新城成都盛大启幕,中国信通院、金蝶携手来自四川省企业联合会、物产中大集团、浙江省交通投资集团、华彩咨询、四川九洲集团、资阳发展投资集团的大咖、专家论道信创,探索中国企业的…

oc uitableView 展示单组数据

设置模型 #import <Foundation/Foundation.h>interface XMGWine : NSObjectproperty (nonatomic,copy) NSString *name; property (nonatomic,copy) NSString *image; property (nonatomic,copy) NSString *money;(instancetype)wineWithDict:(NSDictionary *)dict; end…