【BUG】vue中@change时间传值丢失问题

项目场景:

在修改项目bug时,发现后端响应到前端的值,通过@change事件调用方法,在方法中拿到值时,有部分数据丢失。


问题描述

后端传到前端的值为:字符串类型的"00000089",@change调用的方法中,拿到这个值时,变为了89。

错误代码:

html 复制代码
<el-from-item prop="insured">
	<el-checkbox-group v-model="dto.insured">
		<% for(item in vo.insured) { %>
			<el-checkbox label="${item.name}" @change = "inChange(${item.no})"> </el-checkbox>
		<% } %>
	</el-checkbox-group >
</el-from-item> 


<script type="text/javascript">
	inChange : function(val){
		console.log("res:" , val);
	}
</script>

原因分析:

后端传到前端的值为:字符串类型的"00000089",但是传递@change事件中,元素类型发生了改变,变为数字类型,传递到方法中就变为了数字类型的89。


解决方案:

直接上代码:

html 复制代码
<el-from-item prop="insured">
	<el-checkbox-group v-model="dto.insured">
		<% for(item in vo.insured) { %>
			<el-checkbox label="${item.name}" name="${item.no}" @change = "inChange"> </el-checkbox>
		<% } %>
	</el-checkbox-group >
</el-from-item> 


<script type="text/javascript">
	inChange : function(val, e){
		console.log("res:" , e.target.name);
	}
</script>
相关推荐
隔壁老王z2 分钟前
设计实现一个Web 终端:基于 Vue 3 和 Xterm.js 的实践
前端·iterm
中微子2 分钟前
简单介绍跨域资源共享(CORS)
前端
極光未晚6 分钟前
Vue 项目 webpack 打包体积分析:从 “盲猜优化” 到 “精准瘦身”
前端·vue.js·性能优化
刘小筛13 分钟前
Ant Design Vue (2x) 按钮(button)单击后离开,按钮状态无变化
前端
mogullzr16 分钟前
4.1.ByteOJ用户模块——登录注册功能(RSA + TimeStamp加密过)
前端·后端
鹏多多.17 分钟前
flutter-使用AnimatedDefaultTextStyle实现文本动画
android·前端·css·flutter·ios·html5·web
chenburong20211 小时前
uniapp-vue2导航栏全局自动下拉变色
vue.js·uni-app
卑微前端在线挨打1 小时前
2025数字马力一面面经(社)
前端
OpenTiny社区1 小时前
一文解读“Performance面板”前端性能优化工具基础用法!
前端·性能优化·opentiny
拾光拾趣录2 小时前
🔥FormData+Ajax组合拳,居然现在还用这种原始方式?💥
前端·面试