vue / uniapp 小数点保留2位解决办法和异常处理vendor.js? [sm]:31 [Vue warn]: Error in render: “TypeError: Cannot read

已于 2023-10-12 10:01:51 修改
阅读量4.3k 收藏 1
点赞数 1
分类专栏： vue uni-app 文章标签： vue.js uniapp
于 2022-03-20 16:05:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly19920602/article/details/123614763
版权
vue 同时被 2 个专栏收录
19 篇文章 1 订阅
订阅专栏
uni-app
6 篇文章 1 订阅
订阅专栏

一、上代码

具体业务代码如下

view class="price-box">
			<text>支付金额</text>
			<text class="price">{{order.payableAmount|addZero }}</text>
		</view>
filters: {
    addZero:function(data){
   
        return data.toFixed(2)
    }
},

如上操作，会出现报错信息如下

vendor.js? [sm]:31 [Vue warn]: Error in render: "TypeError: Cannot read property 'toFixed' of undefined"

更多详细报错

vendor.js? [sm]:31 [Vue warn]: Error in render: "TypeError: Cannot read property 'toFixed' of undefined"

(found in pages/money/Pay.vue)(env: Windows,mp,1.05.2201240; lib: 2.22.1)
ce @ vendor.js? [sm]:31
Dr.e.config.errorHandler @ vendor.js? [sm]:31
ml @ vendor.js? [sm]:31
pl @ vendor.js? [sm]:31
e._render @ vendor.js? [sm]:31
t @ vendor.js? [sm]:31
xt.get @ vendor.js? [sm]:31
xt @ vendor.js? [sm]:31
wr @ vendor.js? [sm]:31
Zt.$mount @ vendor.js? [sm]:31
attached @ vendor.js? [sm]:5
i.safeCallback @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
i.call @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
t @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
f @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
p.pretendAttached @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
fo @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
kt @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
(anonymous) @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
$t @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
(anonymous) @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
(anonymous) @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
q.emit @ WAServiceMainContext.js:2
emit @ WAServiceMainContext.js:2
(anonymous) @ WAServiceMainContext.js:2
q.emit @ WAServiceMainContext.js:2
emit @ WAServiceMainContext.js:2
(anonymous) @ WAServiceMainContext.js:2
(anonymous) @ WAServiceMainContext.js:2
c @ VM8 asdebug.js:1
u @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
f @ VM8 asdebug.js:1
g @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
_ws.onmessage @ VM8 asdebug.js:1
Show 6 more frames
vendor.js? [sm]:31 TypeError: Cannot read property 'toFixed' of undefined
    at addZero (parkPay.js? [sm]:25)
    at Proxy.n (parkPay.js? [sm]:17)
    at u.e._render (vendor.js? [sm]:31)
    at u.t (vendor.js? [sm]:31)
    at xt.get (vendor.js? [sm]:31)
    at new xt (vendor.js? [sm]:31)
    at wr (vendor.js? [sm]:31)
    at u.Zt.$mount (vendor.js? [sm]:31)
    at ki.attached (vendor.js? [sm]:5)
    at i.safeCallback (WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2)(env: Windows,mp,1.05.2201240; lib: 2.22.1)
Dr.e.config.errorHandler @ vendor.js? [sm]:31
ml @ vendor.js? [sm]:31
pl @ vendor.js? [sm]:31
e._render @ vendor.js? [sm]:31
t @ vendor.js? [sm]:31
xt.get @ vendor.js? [sm]:31
xt @ vendor.js? [sm]:31
wr @ vendor.js? [sm]:31
Zt.$mount @ vendor.js? [sm]:31
attached @ vendor.js? [sm]:5
i.safeCallback @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
i.call @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
t @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
f @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
p.pretendAttached @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
fo @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
kt @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
(anonymous) @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
$t @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
(anonymous) @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
(anonymous) @ WASubContext.js?t=wechat&s=1647707526833&v=2.22.1:2
q.emit @ WAServiceMainContext.js:2
emit @ WAServiceMainContext.js:2
(anonymous) @ WAServiceMainContext.js:2
q.emit @ WAServiceMainContext.js:2
emit @ WAServiceMainContext.js:2
(anonymous) @ WAServiceMainContext.js:2
(anonymous) @ WAServiceMainContext.js:2
c @ VM8 asdebug.js:1
u @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
f @ VM8 asdebug.js:1
g @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
_ws.onmessage @ VM8 asdebug.js:1
Show 5 more frames
vendor.js? [sm]:31 [Vue warn]: Error in render: "TypeError: Cannot read property 'toFixed' of undefined"

二、最终解决如下

特别补充

感谢这位朋友在评论区指正和补充

你好博主，我遇到一个情况，在转换的时候，不是因为空值，而是返回的是字符，用filters转换报错，需要对数据强转一下。toFixed只能针对Number类型才能使用，所以对于字符类型的要用parseFloat或者parseInt函数先转一下再调用
问题截图：

 

  1.  
    [Vue warn]: Error in render: "TypeError: data.toFixed is not a function"
     
  3.  
    (found in pages/time/index.vue)(env: Windows,mp,1.06.2209190; lib: 3.0.1)
     
 

 

 


                

        

        

    




    

      

        

            

              
                
                  请告诉他
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue2-editor：使用Vue.js和Quill的文本编辑器

				
			

			

				

					02-06
				

			

		

		

			
				
由Quill.js和Vue.js支持的易于使用但功能强大且可自定义的RTF编辑器   安装 您可以使用Yarn或NPM  npm install vue2-editor  要么 yarn add vue2-editor 用法 // Basic Use - Covers most scenarios import { ...

			
		

	



                

              
                



	

		

			

				
					
西瓜视频登录页面

				
			

			

				

					bo1029的博客
				

				

					03-18
					
					11万+
					
				

			

		

		

			
				
页面效果

			
		

	



                


  
              

                


	

		

			

				
					
[ISCTF 2023]——Web、Misc较全详细Writeup、Re、Crypto部分Writeup

				
			

			

				

					Leaf_initial的博客
				

				

					12-04
					
					2643
					
				

			

		

		

			
				
由于懒我直接把上交的wp稍加修改拉上来了，凑活看。

			
		

	





	

		

			

				
					
uniapp保留两位小数，整数后面加.00

				
			

			

				

					Dream_Fever的博客
				

				

					03-27
					
					490
					
				

			

		

		

			
				
直接把方法粘贴进去就能用。

			
		

	



		

			
		



	

		

			

				
					
Java——国家商用密码详解(SM2、SM3、SM4)

				
			

			

				

					吴声子夜歌的博客
				

				

					12-11
					
					1616
					
				

			

		

		

			
				
国密即国家密码局认定的国产密码算法，即商用密码。商用密码，是指能够实现商用密码算法的加密、解密和认证等功能的技术。（包括密码算法编程技术和密码算法芯片、加密卡等的实现技术）。为了保障在金融、医疗等领域保障信息传输安全，国家商用密码管理办公室制定了一系列密码标准，包括SM1（SCB2）、SM2、SM3、SM4、SM7、SM9、祖冲之密码算法（ZUC)等。SSF33、SM1、SM4、SM7是对称算法SM2、SM9是非对称算法SM3是哈希算法。

			
		

	





	

		

			

				
					
【uni-app】对数值进行保留小数点后两位的处理

				
			

			

				

					loyd3的博客
				

				

					04-30
					
					1万+
					
				

			

		

		

			
				
注意toFixed()只能用在数值部分
第一保留小数点数值后两位，尾数四舍五入
numFilter (value) {
	// 截取当前数据到小数点后两位
	let realVal = parseFloat(value).toFixed(2)
	return realVal
}

第二保留小数点后两位的，不会四舍五入
numFilter (value) {
	// 截取当前数据到小数点后三位
	let tempVal = parseFloat(value).toFixed(3)
	let realVal =

			
		

	





	

		

			

				
					
android在线浏览

				
			

			

				

					Melinda_meng的博客
				

				

					07-02
					
					29万+
					
				

			

		

		

			
				
MainActivity。java
package com.example.internetimageview;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.

			
		

	





	

		

			

				
					
http://mail.163.com/help/help_spam_16.htm?ip=118.186.207.7&hostid=smtp5&time=1358341921

					
热门推荐

				
			

			

				

					云计算?
				

				

					01-16
					
					61万+
					
				

			

		

		

			
				
0INRMumLsiQwT0xVgvYVmNCBWS7mV8LzSeLOZGHzflL3ziBSx+iej3G1syAeYvPZxqagQ0P7mgdX
/qgnEWWuIcv4cTR6ZI5QNmqULAGtRkCtCNsphAD7cLBiV7UpV7yvURpKw6H8jHyDDZc8zP5P8QF9
abbRoeoTcPcDs/Ij0+JSX9fkdkqCvmUFYzy/GBb+hMWJ...

			
		

	





	

		

			

				
					
uniapp 微信小程序 对返回的数值保留小数点后两位

				
			

			

				

					maoge_666的博客
				

				

					01-03
					
					770
					
				

			

		

		

			
				
uniapp 微信小程序 对返回的数值保留小数点后两位

			
		

	





	

		

			

				
					
uniapp filter 自动处理value，金额小数点_金额逗号_保留两位小数

				
			

			

				

					yfx000的专栏
				

				

					08-28
					
					5263
					
				

			

		

		

			
				
有时后台取出来数值小数点位数很多，统一做个处理，不是很好的方法，但是filter可以参照使用

1、main.js 这样可以全局调用


Vue.filter('money', function (value) {
	if (!value) return '0.00';
	var value = value.toFixed(2);//提前保留两位小数
	var intPart = Number(value).toFixed(0); // 获取整数部分
	var intPartFormat = intPart

			
		

	





	

		

			

				
					
learningVue：Vue.js原始码解析

				
			

			

				

					02-06
				

			

		

		

			
				
学习Vue介绍Vue.js源码分析，记录了个人学习Vue.js源码的过程中的一些心得以及收获。以及对于Vue框架，周边库的一些个人见解。在学习的过程中我为Vue.js（2.3.0），Vuex（2.4.0），Vue-router（3.0.1）加上了注释，...

			
		

	





	

		

			

				
					
前端面试题汇总(html/css/js/vue/ts/uniapp/git等)

					
最新发布

				
			

			

				

					04-09
				

			

		

		

			
				
涉及知识点： 1、优化（seo优化、渐进增强与优雅降级、性能优化） 2、html 常问面试题 3、css 必会面试题 ...5、vue2-vue3 基础知识以及相关面试题 6、typescript 基础知识 7、uniapp 基础 8、网络相关

			
		

	





	

		

			

				
					
vue-introjs-与vue.js http://introjs.com/集成了intro.js分步指南和功能介绍。-Vue.js开发

				
			

			

				

					05-27
				

			

		

		

			
				
安装添加软件包yarn添加vue-introjs＃或通过npm：npm i vue-introjs安装插件导入VueIntro和Vue的vue-introjs intro.js绑定。 安装添加软件包yarn添加vue-introjs＃或通过npm：npm i vue-introjs安装插件从'vue-...

			
		

	





	

		

			

				
					
Vue安装Vue Devtools调试工具提示 Error: Cannot find module ‘@vue-devtools/build-tools’  解决办法

				
			

			

				

					01-08
				

			

		

		

			
				
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装：安装链接详情  但是在最终执行编译命令的时候 ：npm run build ，提示如下错误：  尝试了很多方法，都不能解决改问题。 为了...

			
		

	





	

		

			

				
					
完美解决[Vue warn]: Invalid prop: type check failed for prop “value“. Expected Array, got String.

				
			

			

				

					请告诉他
				

				

					08-17
					
					1万+
					
				

			

		

		

			
				
有时候，新手来说对于报错很害怕，每个人都是新手过来，如果不懂不问同事自己解决一般是到社区找帮助找答案，我习惯把问题都记录下来发到网上方便后面的人需要时候能帮你快速解决问题



问题

data值要的是list，后台得到的是字符串，渲染到页面上并不影响功能的实现，是因为data在赋值的时候虽然格式不对，但是得到的数据格式是正确的，所以不会影响页面功能







像这种错误，多观察并动手，如上图的x位置有个下拉三角，此时我们点开下拉三角，滚动下去看到





一般到这个地方，会有一个你的.vue...

			
		

	





	

		

			

				
					
处理vue elementui图片回显编辑/修改/删除

				
			

			

				

					请告诉他
				

				

					12-21
					
					8242
					
				

			

		

		

			
				
需求elementui提供啦美观的控件支持页面快速开发，

这里结合jq来实现控件图片上传后的回显问题，回显还能进行编辑，效果如下







代码：



html中加入:file-list="fileList"



在created中加入后台请求的操作，我这里我是后台渲染好的数据，

直接从页面抽取出来，目的是获取后台返回的图片地址，

然后对地址进行改造，如下


<el-upload
      action="#"
      list-type="picture-card"
 ...

			
		

	





	

		

			

				
					
Injection “elForm“ not found

				
			

			

				

					请告诉他
				

				

					01-14
					
					4894
					
				

			

		

		

			
				
使用element ui的控件报错如下







报错误代码：





修正后：


<el-form>

   <el-form-item label="Asn Time：">
      <el-date-picker
            v-model="roCondition.startCreatedate"
            type="daterange"
            range-separator="To"
           ...

			
		

	





	

		

			

				
					
记录一次ERROR in ./node_modules/css-loader?sourceMap!.报错处理

				
			

			

				

					请告诉他
				

				

					01-23
					
					4420
					
				

			

		

		

			
				
项目运行多年，win系统本地环境开发成熟，打包到linux也无问题，近日npm install 和npm run dev 后出现报错信息如下

ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-ae1d291a","scoped":true,"hasInlineConfig":false}!./node_modules/sass-

			
		

	





	

		

			

				
					
vue.runtime.esm.js?c320:4605 [Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

				
			

			

				

					09-03
				

			

		

		

			
				
这个错误是由于在渲染时尝试访问一个未定义的属性'state'引起的。根据引用[3]的内容，这个错误可能是因为你没有正确处理初始状态为空对象的情况。在你的getters函数中，你可以添加一个空对象的默认返回值来避免这个错误。通过在return语句后面添加"|| {}"，即使state.goodsInfo初始值为空对象，也会返回一个空对象作为默认值。这样，就不会再出现"Cannot read property 'state' of undefined"的错误了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* *3* [报错 | vue.runtime.esm....c320:4560 [Vue warn]: Error in render: “TypeError: Cannot read properties of](https://blog.csdn.net/muziqwyk/article/details/126191223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
-  *2* [【报错】vue.runtime.esm.js?c320:4605 [Vue warn]: Duplicate keys detected: ‘40825‘. This may cause ...](https://blog.csdn.net/qq_40797578/article/details/128266387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值