vue中filter过滤器中的this指向
在项目中遇到一个情况,在对日期进行格式化时,定义了一个局部过滤器,但是在过滤器中使用this调用vue的方法时,报方法为undefined的错误,经过对this的打印输出,发现输出结果为undefined;问题如下:<template>{{ '1558490001000' | formatDate }}</template><script>...
·
在项目中遇到一个情况,在对日期进行格式化时,定义了一个局部过滤器,但是在过滤器中使用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方法
更多推荐
已为社区贡献7条内容
所有评论(0)