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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
微信小程序实现录音功能
Nov 22 Javascript
js实现动态时钟
Mar 12 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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 将dataurl转成图片image方法总结
2016/10/14 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
写的htc的数据表格
2007/01/20 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue中监听返回键问题
2019/08/28 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python3实现Web网页图片下载
2016/01/28 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
高二化学教学反思
2014/01/30 职场文书
高中生评语大全
2014/04/25 职场文书
心理咨询承诺书
2014/05/20 职场文书
社区矫正工作方案
2014/06/04 职场文书
2014年团队工作总结
2014/11/24 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
报名委托书
2015/01/29 职场文书