vue中过滤器filters获取不到this的问题以及解决方法

最新推荐文章于 2024-04-24 17:07:19 发布
最新推荐文章于 2024-04-24 17:07:19 发布
阅读量6k 收藏 8
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40685439/article/details/118295619
版权

在vue中，如果要过滤的数据是依赖this上下文的话，是会报错的，因为this的指向是undefined，而不是vue实例；
在这里插入图片描述
打印结果：
在这里插入图片描述
原因：在这里插入图片描述
这句话的大概意思是，vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。
解决办法1：在data中定义一个that=this，在需要过滤的过滤器中传入that参数，然后在过滤器中使用
在这里插入图片描述
在这里插入图片描述
结果：可以拿到firstTime的值
在这里插入图片描述
解决办法2：改用computed计算属性，不过值得注意的是，computed属性默认是不接收传参的，如果是需要依赖其他属性的过滤，可以在computed属性里面返回一个function
在这里插入图片描述

流川命
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目中，在filters中使用this（Vue实例对象）
郭宝的博客
05-06 5616
效果图： 方式一： 在data对象中定义一个 this_ 变量，接收this（Vue实例对象），如下代码： data() { return { this_: this } } 然后声明过滤器时，在形参中加上vue filters: { teacherFiliters(value, vue) { console.log(vue) for (let i = 0; i < vue.teachers.length; i...
Vue3不支持Filters过滤器的问题
10-14
主要介绍了Vue3不支持Filters过滤器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
随手记：vue2 filters this指向undefined
最新发布
weixin_63515766的博客
04-24 313
vue2 filters this指向undefined
vue过滤器filters获取不到this对象的解决办法
前端打工人的博客
11-30 7015
问题：想在过滤器filters中使用this，可能需要data或者props的一个值作为过滤的条件，如果直接使用this是会报错的，因为this为undefined，那如何解决呢？下面列举几个解决办法 一、使用computed <template> {{ '1558490001000' | formatDate }} </template> <script> export default { ... filters: { formatDat
filters过滤器中使用this的解决方案
泥鸽鸽的博客
11-18 4616
vue 中filters过滤器不能使用this的解决方案前言：filters作为Vue中的过滤器 我们在实际开发中会经常使用到 比如在模板上格式化我们想要的日期 但是使用这个属性也会遇到一些问题 比如我们最常用的时间格式化工具moment.js 当我们把它挂载到全局的时候 会使用：方案一： 不使用fiiters这是最直接的 不使用自然就不会又问题 可以直接在模板的差值表达式中写过滤的代码 如下：方案二：使用that代替this这种方式早就为人所用 但是问题出在 不知道在哪了定义that 前言： filte
vue的filters筛选器获取this使用
番茄脸红了~
06-29 1819
vue的filters筛选器；获取this使用；
vue 过滤器 filters 中取不到 this 问题解决
工作中遇到问题记录
11-04 1692
vue 过滤器 filters 中取不到 this 问题解决：定义一个that通过传参的办法取
vue如何在过滤器里面使用this
m0_63816143的博客
01-03 968
如何在过滤器里面使用this
Vue filter中使用this的问题
瘾丶病的博客
11-14 1390
Vue filter中使用this的问题。
在Vue methods中调用filters里的过滤器实例
10-18
今天小编就为大家分享一篇在Vue methods中调用filters里的过滤器实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 过滤器filters及基本用法
11-27
采用vue单文件组件，使用moment插件格式化日期 <h1>{{date | dateFormat}} [removed] import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() ...
filters中的this问题，及在computed中调用函数
莫不静好
09-24 729
背景 过滤器内this的指向是undefined，因而不能在过滤器内使用this引用组件实例的变量或者方法 vue中过滤器更偏向雨文本数据的转化 我们可以使用computed作为替代方案
vue里filters为什么获取不到this？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-28 4665
问题 <div>{{auditResult | auditResultNameFilter}}</div> data() { return { auditResultOptions: [...] } }, filters: { auditResultNameFilter(status) { let [obj] = this.auditResultOptions.filter(item => item.value === status
vue ---- filters过滤器中不能使用this问题
Allen-Ye博客
07-20 791
vue ---- filters过滤器中不能使用this问题
vue 组件 filter 里获取this里的数据
狗狗狗亮的博客
02-09 1093
可以通过传参的方式获取 template： <el-table-column prop="flowDirection" label="流向" width="80"> <template slot-scope="scope"> <div> {{scope.row.flowDirection | formtaLab(labList)}} </div> </template> </
vue如何在filter中使用this
weixin_43078608的博客
09-30 5689
filter过滤器在vue中使用的还是比较频繁，但使用中还是会遇到一些问题。如： controllerDisable(value) { if (value) { if (this.countStrlen(value) > 20) { return false; } } return true; }, 当你需要在filter使用你自定义的函数时，你会发现是undefined，这里就涉及到this指向的问题。只需要： beforeCreate: f
纯CSS 移动端，根据宽度获取高度
qq_19484091的博客
05-28 551
html部分代码 <div class="goods_div"> <div class="goods_li"> </div> <div class="goods_li"> </div> <div class="goods_li"> </div> </div> CSS部分代码 .goods_div{width:100%;} .goods_li{width:33.33%; paddin
vue filters中获取this
03-16
在Vue的过滤器中，无法直接获取this对象。如果需要在过滤器中使用this，可以通过在Vue实例中定义一个方法，然后在过滤器中调用该方法来获取this对象。例如： ``` Vue.filter('myFilter', function(value) { // 调用Vue实例中的方法来获取this对象 var vm = this.getVueInstance(); // 在这里可以使用vm来访问Vue实例中的数据和方法 // ... }); new Vue({ el: '#app', methods: { getVueInstance: function() { return this; } } }); ``` 在上面的例子中，我们在Vue实例中定义了一个getVueInstance方法，该方法返回this对象。然后在过滤器中调用该方法来获取this对象。这样就可以在过滤器中访问Vue实例中的数据和方法了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值