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 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
JS实现随机点名器
Apr 12 Javascript
vue监听dom大小改变案例
Jul 29 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
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python新手实现2048小游戏
2015/03/31 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python计算导数并绘图的实例
2020/02/29 Python
python 监控logcat关键字功能
2020/09/04 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
大课间体育活动方案
2014/03/12 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
群众路线个人整改措施
2014/10/24 职场文书
学生检讨书
2015/01/27 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android
python中validators库的使用方法详解
2022/09/23 Python