关于Vue使用es6模板字符串没反应的问题

最新推荐文章于 2022-04-18 09:30:14 发布

原创最新推荐文章于 2022-04-18 09:30:14 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #字符串 #vue

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

es6

2 篇文章

订阅专栏

博客讲述了在Vue项目中遇到GET请求时，使用ES6模板字符串无法正常识别变量的问题。错误做法是用单引号包裹字符串，导致变量未被解析。正确解决方案是改用反引号（`）创建模板字符串，确保变量能够被正确识别并发送到请求中。

错误示范

VScode发get请求的地址及参数使用单引号''包裹时，发现${this.keyWord}没有变颜色，跟字符串一个颜色,也就是没有将this.keyWord识别成变量，当成了一般字符串，发请求时带的参数问题请求不到结果

search(){
	this.$axios.get('https://api.github.com/search/users?q=${this.keyWord}').then(
		res => {
			console.log(res);
		},
		err => {
			console.log(err);
		}
	)
}

正确做法

将包裹字符串与模板字符串的单引号''换做倒引号``，也就是键盘左上角Esc键下面的波浪号那个键（注意要英文状态下的），可以看到模板字符串变颜色了，就可以正常使用啦

search(){
	this.$axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
		res => {
			console.log(res);
		},
		err => {
			console.log(err);
		}
	)
}