vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

Cannot set reactive property on undefined, null, or primitive value: //无法对未定义的值、空值或基元值设置反应属性：

比如我们在写一个表单，提交成功后要清空表单

我把数据绑在上面了方便看，确定提交成功我们一般要清空input，而我在js里开始这样写

我写的时候提交成功直接把这个对象变成空了，再次打开弹窗就会报这类型错

上面绑的数据已经成空了，所有找不到这个对象包括key ，value

清空的话，单个清空，或者直接对象为空

或者用遍历都可以，就这个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>

就会出现这个这个错误，如下图：

解决办法一：把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 解决无法对未定义的值,空值或基元值设置反应属性报错问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default

  • 浅谈vue方法内的方法使用this的问题

    如下所示: locapos(){//定位方法 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; var latLng = new google.maps.LatLng(aa[1], aa[0]); var info

  • vue中渲染对象中属性时显示未定义的解决

    后端给的对象结构是这样的,三层嵌套 而在最开始的时候我在data中定义了一个对象(dataInfo)接受了图示所有的属性 而在template中我要渲染数据(dataInfo.clientInfo.deviceName) 然后....在这里插入图片描述 未定义...作为一个前端菜鸡,百思不得其解. 最终在有道的帮助下,告诉我了此属性不在vue实例上 恍然大悟 只能解析在data中定义也就是vue实例上的对象子一层的东西,对于孙一层的东西就被解析成不在vue实例上的 两种解决方法: 第一: 在定义

  • vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

    Cannot set reactive property on undefined, null, or primitive value: //无法对未定义的值.空值或基元值设置反应属性: 比如我们在写一个表单,提交成功后要清空表单 我把数据绑在上面了方便看,确定提交成功我们一般要清空input,而我在js里开始这样写 我写的时候提交成功直接把这个对象变成空了,再次打开弹窗就会报这类型错 上面绑的数据已经成空了,所有找不到这个对象包括key ,value 清空的话,单个清空,或者直接对象为空 或者

  • 解决javac不是内部或外部命令,也不是可运行程序的报错问题

    解决javac不是内部或外部命令,也不是可运行程序的报错问题

    目录 简述 下面就讲讲解决方法 解决过程 可能还有的问题 解决之后的效果 简述 在学着使用Java的命令行来编译java文件的时候,遇到了这个问题 Windows操作系统报错 “‘javac’不是内部或外部命令,也不是可运行的程序或批处理文件” 下面就讲讲解决方法 回复评论区的找不到环境变量和用户变量的哥们 瞎发帖 解决过程 根据探究的情况来看,这里其实是没有安装好(或者是安装了之后但是在环境变量上却没有设置好) 第一步: 在http://www.oracle.com/technetwork/j

  • ie8下修改input的type属性报错的解决方法

    ie8下修改input的type属性报错的解决方法

    摘要: 现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做试验,测试结果是chrome,Firefox,ie9+都是好的,在ie8以下就会报错,查找了下原因,ie8中是不允许修改input的type属性,最终换了种思路实现. 当勾选显示明文时替换输入框为type="text",不勾选时在将输入框替换为type="password&quo

  • javascript中使用未定义变量或值的情况分析

    本文实例讲述了javascript中使用未定义变量或值的情况.分享给大家供大家参考,具体如下: javascript里面一般不能使用未定义的值,但是下面几种情况除外: 1. 赋值语句中: a=9; alert(a) //9 赋值语句中需要赋值的变量没定义会先定义,再赋值.另外从 a=b=c=8 不报错可以看出赋值语句是从右向左执行的. 2. for in语句中: for(key in {name:'goofy'}){ alert(key) //"name" } alert(key) /

  • 在使用vuex的时候出现commit未定义错误的解决

    目录 使用vuex的时候出现commit未定义错误 出现的原因 错误展现过程 vuex模块化 commit()时报错 unknown mutation type:xxx 废话不多说直接上问题 总结 使用vuex的时候出现commit未定义错误 出现的原因 书写错误 当然,这个错误不是你单词书写错误 只要的原因是因为你的这个 方法里面没有 commit 这个方法 为什么没有?其实它是有的,只不过在 context 里面 你可能是直接写 commit(xxx)了 错误展现过程 首先我们先调用一下 <

  • C++未定义行为（undefined behavior）

    衡量一个人是否真正活着的根本方法,就是看他是否有意愿.有能力做出主动的选择. 在计算机程序设计中,未定义行为(undefined behavior)是指行为不可预测的计算机代码.这是一些编程语言的一个特点,最有名的是在C语言中.在这些语言中,为了简化标准,并给予实现一定的灵活性,标准特别地规定某些操作的结果是未定义的,这意味着程序员不能预测会发生什么事. 一个问题 此问题摘自知乎: 对顺序容器 ( vector ) 的访问: 如果使用 operator[] 访问容器,下标越界是未定义行为. 使用

  • vue 解决computed修改data数据的问题

    最近在做项目的时候遇见一个问题,computed修改data数据的时候会报错.报错的大概意思是,不可以修改data数据的属性值.查了一些答案,最终解决办法是需要用到set和get.看代码: data () { return { fold: false } } 我想修改fold的值,如果不用get和set就会报错!!! computed:{ listShow: { get: function () { if (!this.totalCount) { return false } return th

  • 解决vue 项目引入字体图标报错、不显示等问题

    问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

  • Vue项目报错:parseComponent问题及解决

    Vue项目报错:parseComponent问题及解决

    目录 Vue项目报错:parseComponent 报错内容 解决步骤 Vue常见错误及解决办法 1.在配置路由并引入组件后 2.在组件中的标签和样式中图片路径出错时 3.在组件中标签没有闭合 4.在使用less定义变量是报错 本地开发环境请求服务器接口跨域的问题 Vue项目报错:parseComponent 报错内容 ERROR  Failed to compile with 1 error                                                    

  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    目录 vue属性报undefined错误 最终解决方法 vue之各种报错问题 vue属性报undefined错误 在一个组件里,通过props传值进去对象,在控制台打印报错误信息,提示某属性不存在. 例如: <div>{{data.param.aaa}}</div> 类似这种的,取对象子级下面的值,就报了undefined. 原因应该是在初始传值,最多默认 data={}. 我尝试在props里设置好默认值,但是依然报错 这么设置的props: props:{     data:O

随机推荐