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

时间: 2018-01-04阅读: 4401标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

ajax延时请求问题

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

Ajax异步请求

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

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

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

谈CSRF与JSONP设置header问题

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

关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只能用其他方法来解决,下来是解决的方法

ajax请求 get与post的区别?_get和post的使用场景

使用Ajax时,采用Get或者Post方式请求服务器,那么它们的区别有哪些呢?相比post,get请求参数跟在url后面,提交数据的长度长度有限制,而且会被浏览器缓存起来,存在一定的安全问题。

纯Js实现ajax

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。创建对象,并兼容各种浏览器;请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够

ajax请求中的contentType和dataType

contentType设置你发送给服务器的格式,有以下三种常见情况。application/x-www-form-urlencoded :默认值,application/json:服务端消息主体是序列化后的 JSON 字符串。

javascript的ajax是什么?

AJAX(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax 它是与服务器交换数据的技术,在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),它在不重载全部页面的情况下

Ajax原理以及优缺点

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

点击更多...

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