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 function调用时的参数检测常用办法
Feb 26 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
javascript中的隐式调用
Feb 10 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
javascript中layim之查找好友查找群组
Feb 06 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php数组删除元素示例
2014/03/21 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
js实现简易计算器小功能
2020/11/18 Javascript
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
介绍一下Java的安全机制
2012/06/28 面试题
大学生应聘自荐信
2013/10/11 职场文书
精细化工应届生求职信
2013/11/17 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
护士求职信范文
2014/05/24 职场文书
欢迎领导检查标语
2014/06/27 职场文书
财务管理专业自荐书
2014/09/02 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
网吧员工管理制度
2015/08/05 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技