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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
js格式化时间小结
Nov 03 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
Vue页面渲染中key的应用实例教程
Jan 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/22 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
jQuery创建折叠式菜单
2019/06/15 jQuery
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python+pyqt5实现24点小游戏
2019/01/24 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Python之pymysql的使用小结
2019/07/01 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python如何随机生成高强度密码
2020/08/19 Python
python操作redis数据库的三种方法
2020/09/10 Python
2014全国两会心得体会
2014/03/17 职场文书
主持词开场白
2014/03/17 职场文书
党员一句话承诺大全
2014/03/28 职场文书
大学生就业意向书范文
2014/04/01 职场文书
《长相思》听课反思
2014/04/10 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
在职证明范本
2015/06/15 职场文书