关闭

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

Content-Type属性的取值和作用

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

ajax设置header头部之后造成跨域的解决方案

解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现。

ajax 高级技术

ajax技术是一种从客户端向服务器请求数据的技术,而如果是要将数据从服务器主动推向客户端,那么就需要更加高级的数据传输技术,这些技术主要是为了处理一些在客户端展示服务器上实时变化的数据

使用AJAX实现文件拖拽上传功能详解

前端选择文件上传的两种方式:对话框选择方式上传、拖拽选择方式上传;如何上传获取到的文件?使用AJAX即可通过表单方式上传文件。

使用Ajax同步请求时,等待时间过长增加页面提示问题

后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,以及项目的完善性,这个时候就需要增加一个等待页面进行提示。

Ajax原理以及优缺点

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

ajax请求中的contentType和dataType

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

封装的一个Ajax小框架

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:

原生JavaScript手写Ajax

封装通用的xhr对象,兼容各个版本,判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,firefox, opera等,将所有可能出现的ActiveXObject版本放在一个数组中

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

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

点击更多...

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