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

时间: 2018-01-04阅读: 2854标签: 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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

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

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

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

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

封装的一个Ajax小框架

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

javascript的ajax是什么?

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

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

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

Ajax跨域CORS

在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin、Methods、Headers、Credentials;Origin当浏览器用Ajax跨域请求的时候,会带上一个请求头“Origin: 协议://页面域名”,

模仿jquery封装ajax功能

因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变。。也许是我不太会用吧。。其实换个方式接收也没什么,只是习惯了JQ序列化参数

Ajax异步请求

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

ajax延时请求问题

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

谈CSRF与JSONP设置header问题

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

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

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

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广