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里用escape转码
Aug 28 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
再谈javascript原型继承
Nov 10 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 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
第十一节 重载 [11]
2006/10/09 PHP
php 时间计算问题小结
2009/01/04 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php如何获取文件的扩展名
2015/10/28 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
PHP children()函数讲解
2019/02/03 PHP
PHP递归的三种常用方式
2019/02/28 PHP
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
node.js入门教程
2014/06/01 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
React组件生命周期详解
2017/07/03 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
python中xrange用法分析
2015/04/15 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
项目投资意向书
2014/04/01 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
归元寺导游词
2015/02/06 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
python编写五子棋游戏
2021/05/25 Python