在项目中遇到一个情况,在对日期进行格式化时,定义了一个局部过滤器,但是在过滤器中使用this调用vue的方法时,报方法为undefined的错误,经过对this的打印输出,发现输出结果为undefined;
问题如下:

	<template>
		{{ '1558490001000' | formatDate }}
	</template>
	<script>
		export default {
			...
			filters: {
				formatDate (val) {
					console.log(this)  // 输出结果为undefined
					return this.$moment(val).format('YYYY-MM-DD')	// 报$moment()undefined
				}
			}
		}
	</script>

解决方法

	<template>
		{{ formatDate('1558490001000') }}
	</template>
	<script>
		export default {
			...
			computed: {	// 使用计算属性
				formatDate () {
					return function (val) {		// 对计算属性进行传参
				        return val ? this.$moment(val).format('YYYY-MM-DD HH:MM:SS') : ''
				      }
				}
			}
		}
	</script>

经查阅过滤器的说用发现:是vue中的过滤器更偏向于对文本数据的转化,不能够一栏this上下文,所以如果需要使用到上下文的this,应该使用computed计算属性或者method方法

Logo

前往低代码交流专区

更多推荐