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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
纯JS实现五子棋游戏
May 28 Javascript
vuex实现购物车功能
Jun 28 Javascript
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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
js数组的操作指南
2014/12/28 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
webpack打包js的方法
2018/03/12 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python 用下标截取字符串的实例
2018/12/25 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python getopt模块使用实例解析
2019/12/18 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
平面设计的岗位职责
2013/11/08 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
小学生毕业评语
2014/12/26 职场文书
《月光曲》教学反思
2016/02/16 职场文书