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

使用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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_319