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的jqDnR拖拽溢出的修改
Feb 12 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
Angular路由简单学习
Dec 26 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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实现文件安全下载
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP安全性漫谈
2012/06/28 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
如何定义TensorFlow输入节点
2020/01/23 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
税务干部个人整改措施思想汇报
2014/10/10 职场文书
教师节班会主持词
2015/07/06 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
 Python 中 logging 模块使用详情
2022/03/03 Python