vue.js在钩子(如created())中使用axios不能获取属性data的解决方法:

记录一个案例(请求数据,并用新数据更新页面)中遇到的问题:

data: { //data域数据
	list: [
		{id: 1, name: '奔驰', ctime: new Date()},
		{id: 2, name: '宝马', ctime: new Date()}
	]
},

错误案例:

created() { //当Vue示例创建成功后自动调用
	this.getAllList();
},
getAllList() { //获取数据库所有品牌信	
	//测试使用axios:1.确认导入aixos包
	axios.get('http://www.liulongbin.top:3005/api/getprodlist')
		.then(function(response) {
			//注意: 在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
			let result = response.data; //axios 请求后数据存放于data中 
        	if(result.status === 0) { //获取成功
        		console.log(result.message);
        		this.list = result.message; //错误,此处无法获取到Vue实例的this。
			} else { //获取失败
				alert('获取数据失败');
			}
    	})
		.catch(function(error){
			alert("请求数据失败");
		});
	},

错误说明:
无报错,可以获取到接收到的数据,可以成功打印接收到的信息于后台,但是页面显示的数据无法更新。
原因是在axios 的这个 then 里边的赋值方法this.list = result.message;会出现错误,什么原因——在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。

修正

created() { //当Vue示例创建成功后自动调用
	this.getAllList();
},
getAllList() { //获取数据库所有品牌信	
	//测试使用axios:1.确认导入aixos包
	let self = this; //解决axios 中 then 内部不能使用Vue的实例化的this 的问题
	axios.get('http://www.liulongbin.top:3005/api/getprodlist')
		.then(function(response) {
			//注意: 在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
			let result = response.data; //axios 请求后数据存放于data中 
        	if(result.status === 0) { //获取成功
        		//使用self 来缓存Vue 实例的 this,更新data 中数据
        		self.list = result.message;
			} else { //获取失败
				alert('获取数据失败');
			}
    	})
		.catch(function(error){
			alert("请求数据失败");
		});
	},

修改说明:
先使用一个变量如 self 来缓存Vue 实例的this,再使用self 来修改data 数据实现更新。
或者我们可以使用 ES6 的 箭头函数arrow function,箭头方法可以和父方法共享变量 :

created() {
	axios.get('http://www.liulongbin.top:3005/api/getprodlist')
    	then((response) => { //使用箭头函数方法与父方法共享变量 
           this.list = result.message;
       })
    },

方法参考:博客园

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐