Vue中运用ajax this指向问题

最新推荐文章于 2025-06-08 14:56:11 发布

Huijie Xu

最新推荐文章于 2025-06-08 14:56:11 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发基础概念

本文链接：https://blog.csdn.net/Xu_cipu/article/details/102858526

前端开发基础概念专栏收录该内容

21 篇文章

订阅专栏

在Vue组件的methods中定义的方法，如果在ajax回调中使用this，会发现它并不指向Vue实例，而是指向ajax对象。解决这个问题通常需要保存Vue实例的引用或者使用箭头函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue component中的methods域里定义一个方法，这个方法中会调用某一个ajax call，在ajax中的this会指向ajax本身，而不再是vue实例本身。

methods: {
typeAhead: function (searchType) {
			**var self = this;** //获取vue实例本身，捕获指针指向
			var searchURL = "";
			switch (searchType) {
				case "companyName" :
					searchURL = "/my-account/typeAheadCompanyName";
					break;
				case "repId" :
					searchURL = "/my-account/typeAheadRepId";
					break;
				case "repFirstName" :
					searchURL = "/my-account/typeAheadRepFirstName";
					break;
				case "repLastName" :
					searchURL = "/my-account/typeAheadRepLastName";
					break;
			}
		
			var ajaxData = {};
			if(searchType == "companyName" || searchType == "repId") {
				ajaxData = {searchKeyWords:this.searchVal};
			}
			else {
				ajaxData = {repFirstName: this.firstName,repLastName: this.lastName}
			}
			$.ajax({
				type : "GET",
				url : searchURL,
				data : ajaxData,
				success : function(result) {
					**self.typeAheadResult.length=0;** //清空vue实例data中的数组
					for(var i=0;i<result.length;i++){
						**self.typeAheadResult.push(result[i]);** //填充vue实例data中的数组
					}
					**self.showTypeAhead = true;** //修改vue实例中的值，控制typeahead显示结果
				},
				error : function(e){
					**self.showTypeAhead = false;**
				}
			});
		}
}

不要直接用this