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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
js 深拷贝函数
Dec 04 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
php实现水仙花数示例分享
2014/04/03 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python关闭windows进程的方法
2015/04/18 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python读取并写入mat文件的方法
2019/07/12 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
详解Python中import机制
2020/09/11 Python
解决python3输入的坑——input()
2020/12/05 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
医院护士的求职信范文
2013/12/26 职场文书
领导失职检讨书
2014/02/24 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript