热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

解决vue 局部过滤器获取不到this的问题_vue.js

这篇文章主要介绍了解决vue 局部过滤器获取不到this的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完

vue 局部过滤器获取不到this

data里面加个字段赋值this。

在这里插入图片描述




这里用的element table , 在过滤器里传入参数,that。

在这里插入图片描述

就可以获取到data里的变量了。

vue filters为什么获取不到this

问题


{{auditResult | auditResultNameFilter}}


data() {
return {
auditResultOptions: [...]
}
},
filters: {
auditResultNameFilter(status) {
let [obj] = this.auditResultOptions.filter(item => item.value === status);
return obj.name;
}
},

上面会出现报错

原因

关于这个问题尤大有讲

【this undefined in filters #5998】https://github.com/vuejs/vue/issues/5998

在这里插入图片描述

解决方法

我们可以用下面这种写法、或者用计算属性跟方法都行,比如下面这种

{{auditResult | auditResultNameFilter(auditResultOptions)}}


filters: {
auditResultNameFilter(status, auditResultOptions) {
let [obj] = auditResultOptions.filter(item => item.value === status);
return obj.name;
}
},

vue 局部过滤器获取不到this

data里面加个字段赋值this。

在这里插入图片描述




这里用的element table , 在过滤器里传入参数,that。

在这里插入图片描述

就可以获取到data里的变量了。

vue filters为什么获取不到this

问题


{{auditResult | auditResultNameFilter}}


data() {
return {
auditResultOptions: [...]
}
},
filters: {
auditResultNameFilter(status) {
let [obj] = this.auditResultOptions.filter(item => item.value === status);
return obj.name;
}
},

上面会出现报错

原因

关于这个问题尤大有讲

【this undefined in filters #5998】https://github.com/vuejs/vue/issues/5998

在这里插入图片描述

解决方法

我们可以用下面这种写法、或者用计算属性跟方法都行,比如下面这种

{{auditResult | auditResultNameFilter(auditResultOptions)}}


filters: {
auditResultNameFilter(status, auditResultOptions) {
let [obj] = auditResultOptions.filter(item => item.value === status);
return obj.name;
}
},


推荐阅读
author-avatar
caozhengweile_854
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有