vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题


Posted in Javascript onJuly 31, 2020

Cannot set reactive property on undefined, null, or primitive value: //无法对未定义的值、空值或基元值设置反应属性:

比如我们在写一个表单,提交成功后要清空表单

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

我把数据绑在上面了方便看,确定提交成功我们一般要清空input,而我在js里开始这样写

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

我写的时候提交成功直接把这个对象变成空了,再次打开弹窗就会报这类型错

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

上面绑的数据已经成空了,所有找不到这个对象包括key ,value

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

清空的话,单个清空,或者直接对象为空

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

或者用遍历都可以,就这个rz问题搞了好一会。。。。

补充知识:解决Uncaught TypeError: Cannot set property 'onclick' of null错误的方法

问题分析:当JS文件放在head标签里中时,并且绑定了onclick事件,就出现了这个错误

原因:

W3School中介绍浏览器先加载完按钮节点才执行JS,当浏览器自顶向下解析时,找不到onclick绑定的按钮节点了

如下面这个例子:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件</title> 
<script>
 var Btn = document.getElementById('btn');
 Btn.onclick = function(){ 
  console.log("push the button ");  
 }
</script> 
</head> 
<body> 
 <button id="btn">计算</button> 
</body>
</html>

就会出现这个这个错误,如下图:

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

解决办法一:把JS内容用window.οnlοad=function(){ }包裹起来

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>事件</title>
 <script>
  window.onload = function () {
   var Btn = document.getElementById('btn');
   Btn.onclick = function () {
    console.log("push the button ");
   }
  }
 </script>
</head>
<body>
 <button id="btn">计算</button>
</body>
</html>

解决办法二:把js文件放在底部加载

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>事件</title>
</head>
<body>
 <button id="btn">计算</button>
 <script>
  var Btn = document.getElementById('btn');
  Btn.onclick = function () {
   console.log("push the button ");
  }
 </script>
</body>
</html>

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

以上这篇vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
jQuery 表单验证扩展(三)
Oct 20 Javascript
JS简单计算器实例
Jan 20 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
vscode中Vue别名路径提示的实现
Jul 31 #Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 #Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 #Javascript
JS可断点续传文件上传实现代码解析
Jul 30 #Javascript
Vue单文件组件开发实现过程详解
Jul 30 #Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 #Javascript
在vue中实现嵌套页面(iframe)
Jul 30 #Javascript
You might like
Php注入点构造代码
2008/06/14 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python re模块介绍
2014/11/30 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
linux面试题参考答案(11)
2016/11/26 面试题
个人简历自我鉴定
2013/10/11 职场文书
合同专员岗位职责
2013/12/18 职场文书
教师实习自我鉴定
2013/12/18 职场文书
护理专业自我鉴定
2014/01/30 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
银行办公室岗位职责
2014/03/10 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
军训结束新闻稿
2015/07/17 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS