Vue通过ajax获取数据,如何避免绑定的数据中出现 property of undefined错误

更新日期: 2018-01-04阅读量: 4508标签: ajax

使用vue开发过程中,通过使用{{}}或者v-text=""的形式进行数据绑定,如果数据是通过服务器异步获取的。在控制台我们会发现报这样的错误:

<span v-text="data.name"></span>

//Uncaught TypeError: Cannot read property 'name' of null

js:

data() {
	return {
	  node:null,
	};
},

这是由于node是在获取之前,node.name是未定义的,可以通过以下方法解决:


1、使用v-if

在使用数据的最外层标题添加一个v-if="node.name",可以避免这样的错误提示。  

<template v-if="node.name">
    <span v-text="node.name"></span>
</template>


2、使用空对象

所以在初始化时,node 属性赋值为空对象就行了

data() {
	return {
	  node:null,
	};
},

js中使用空对象的属性为:undefined。如下

var a=null;
var b={};
console.log(b.name);//打印:undefined
console.log(a.name);//报错:Uncaught TypeError: Cannot read property 'name' of null


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/319

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

谈CSRF与JSONP设置header问题

在CSRF/JSONP劫持的运用上,CORS跨域被限制的情况下不存在了,因此AJAX的GET/POST一堆灵活操作没法用。JSONP也无法设置header、cookie等。FORM表单请求的方式当然也没法设置header

Content-Type属性的取值和作用

Content-Type 的值类型:application/json:消息主体是序列化后的 JSON 字符串,application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式

ajax提交 使用css 控制按钮防止重复点击

有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果

js中关于ajax笔试面试题汇总

什么是ajax?Ajax包含下列技术,为什么要用ajax?Ajax应用程序的优势在于?Ajax的最大的特点是什么?请介绍一下XMLHTTPREQUEST对象?Ajax技术体系的组成部分有哪些?AJAX应用和传统Web应用有什么不同...

ajax延时请求问题

在做实时搜索时,给input标签设置input propertychange监听,然后进行实时请求,如果在监听事件里面直接进行请求,就会导致每一次输入的变化都会进行请求,但是有时候搜索词可能比较长,并不希望前面每次的变化都进行请求

使用原生Ajax进行用户名重复的检验

XMLHtttpRequest对象调用status属性可获得服务器返回的 HTTP 状态码,Ajax请求时,加了个一时间戳,目的是防止浏览器使用缓存。因为在浏览器开了缓存的情况下,对同一链接的相同参数

Ajax异步请求

其实我理解前端如何通过url从后端获取数据,对于异步请求Ajax一直表示有点迷惑,所谓不尝试和不探索,光靠看概念你是永远不能理解代码的魅力的,正好公司的项目里用到了最经典的Ajax,正好作为一个案例来学习如何用json的Data

解决ajax跨域访问sessionid不一致问题

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求服务器就会以为是一个新的人

IE浏览器关于ajax的缓存机制

IE浏览器对于同一个URL只返回相同结果。因为,在默认情况下,IE会缓存ajax的请求结果。对于同一个URL地址,在缓存过期之前,只有第一次请求会真正发送到服务端。大多数情况下,我们使用ajax是希望实现局部刷新的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!