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是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
PHP面向对象概念
2011/11/06 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
代码生成器 document.write()
2007/04/15 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
Vue项目中配置pug解析支持
2019/05/10 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
初一英语教学反思
2016/02/15 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Mysql Show Profile
2021/04/05 MySQL
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电