Vue 计算属性或过滤器中this.xxx拿不到数据

Vue 计算属性或过滤器中this.xxx拿不到数据

1.在计算属性中使用箭头函数

<template>
	<div>{{getId}}</div>
</template>
<script>
	export default {
		data() {
			return {
				id: 123,
				title: '标题',
			}
		},
		getId:()=>{ 
			//console.log(this.title);  //  出现报错
			console.log(this);   //  再来打印一下this   发现返回的是undefined
		},
</script>

说明:
计算属性中，使用箭头函数this将不会指向这个组件的实例，那如何拿去data中的数据呢，原来箭头函数第一个参数，便是组件的实例。或者只要不使用箭头函数便可以正常使用this

	getId:(res)=>{ 
		console.log(res.title);  //标题
	},

	getId:function(){
		console.log(this.title); //标题	 
	}

2.在filters中使用data中的数据

	<div>{{title|value}}</div>
	、、、、、、
	data() {
			return {
				id: 123,
				title: '标题',
			}
		},
	filters:{
		value(res){
			console.log(res);  //标题
			console.log(this.id);  //报错
		}
	}

解决：通过给过滤器传参的方式将所需data中的值传入

	<div>{{title|value(id)}}</div>
	、、、、、、
	filters:{
		value(res,id){
			console.log(res); //标题
			console.log(id);  //123
		}
	}