关于vue中filters的指向问题

最新推荐文章于 2024-04-24 17:07:19 发布
最新推荐文章于 2024-04-24 17:07:19 发布
阅读量538 收藏 1
点赞数 2
分类专栏： vue 报错集锦 文章标签： vue 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45632139/article/details/105927942
版权

通过官网上的寻找发现
vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文,
所以在vue的filters中this指向的是undefined

如果要想实现和filters和this配合实现的功能，可以使用计算属性computed或者方法methods，
也可以改变filters中的this指向
在mounted中改变this的指向

mounted() {
    window.that = this
},

在filters中可以直接使用that

filters: {
    levelname: function(id) {
      return that.data_select[id]
    },
}

亲测有效!!!

rennan…
关注
专栏目录
vue filters过滤器的用法
qq_43146962的博客
02-25 659
1、过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div :id="message | capitalize"></div> 你可以在一个组件的选项中定义本地的过滤器： data() { message: '' } filters: { capitalize: fun
vue filters中使用data中数据
qq_15859173的博客
12-25 886
vue 的filters中 this指向的并不是vue实例，但想要获取vue实例中data中的数据，可以在 beforeCreate中将vue实例赋值给定义的全局变量app，然后在filters中通过app代替this来获取data中的数据。 <script> // 全局变量app let app = null; export default { data: { return: { skin: "敏感肌", }, }, beforeCreate() {
Vue filters this指向问题
weixin_39587245的博客
03-04 812
Vue实例中filter不依赖于当前vue实例上下文,所以在filter中无法直接访问当前vue实例, 所以可以使用computed替代。 可是当遇到需要
vue过滤器filter中this指向问题
weixin_44036603的博客
02-16 2779
vue 过滤器的使用
vue中过滤器filters的this指向问题。
热门推荐
weixin_40837048的博客
09-10 2万+
今天在完成一个时间戳转化时想试试vue的过滤器filters，代码如下： execute_time(time) { if (time === 0) return '/' else return this.getTime(time) } 我发现报了个"TypeError: Cannot read property ‘getTime’ of undefined"，我第...
vue中filter过滤器中的this指向
qq_40652539的博客
10-25 1万+
在项目中遇到一个情况，在对日期进行格式化时，定义了一个局部过滤器，但是在过滤器中使用this调用vue的方法时，报方法为undefined的错误，经过对this的打印输出，发现输出结果为undefined; 问题如下： <template> {{ '1558490001000' | formatDate }} </template> <script> ...
Vue 过滤器filters及基本用法
11-27
在Vue中，过滤器（filters）是一种特殊的功能，用于转换数据，通常在模板中用于格式化输出。本篇文章将详细介绍Vue过滤器的基本概念、用法以及如何创建自定义过滤器。 ### Vue 过滤器的定义与应用 过滤器在Vue中...
vue中filters的使用
qq_40411134的博客
05-29 407
在vue中有的需要根据判断条件展示数据就是要用到filters <template> <div> <div>{{arr|getNumber}}</div> <!-- 得到的就是1 --> </div> </template> <script> export default { data(){ return{ arr=['1','2'] } },
Vue基础（filters 过滤器属性）
weixin_45368324的博客
05-01 709
过滤器 过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数 假设有一个用于把内容转为大写的过滤器函数 toUpperCase {{content|toUpperCase}} | : 管道符，表示数据从左至右通过管道符进行传递 过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果 注册过滤器 全局过滤器 Vue.filter('过滤器...
随手记：vue2 filters this指向undefined
最新发布
weixin_63515766的博客
04-24 462
vue2 filters this指向undefined
Vue数据过滤与this指向的问题
随便写写
12-15 1064
实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https:/
vue中过滤器filters的this指向问题,指为undefined
Sapling
12-09 5053
有时候我们在使用vue中的过滤器filters方法时，用到this时会报undefined错，那是因为在filters中的this指向其实是为undefined,如果真的想使用可以全局定义一个that, 进行代替，let that = this; 那是因为当初为了设计过滤器filters更偏重于对文本数据的转化，如果使用上下文中的this,可以使用计算属性computed或者方法methods。 ...
vue过滤器filters获取不到this对象
DreamFJ的博客
04-21 1万+
参考：https://github.com/vuejs/vue/issues/5998
vue filter过滤器中this不指向vue实例
m0_73323423的博客
08-07 188
解决方法，声明一个全局变量=this，在过滤器中使用全局变量。
vue filters过滤器this报undefined的解决方案
过眼云烟—了凡
06-11 1567
在使用 vue filters过滤器的过程中发现直接用this. 获取需要遍历的数据会报undefined错误，打印this发现输出的是undefined, 想到一下解决方案： 1.全局声明一个变量 在这里插入图片描述 2.在生命周期里将this赋值给 that 在这里插入图片描述 filters过滤器中再次打印that 可以输出想要的结果了 ...
vue的filters筛选器获取this使用
番茄脸红了~
06-29 2296
vue的filters筛选器；获取this使用；
为什么 filter 里的 this 绑定的不是 Vue ？
weixin_34174132的博客
04-22 3854
最近工作中遇到一个问题，就是 filter 中的函数无法使用绑定在 Vue.prototype 的函数。都知道，在 created、mounted、methods 中， this 绑定的都是当前 Vue 实例。偏偏 filter 函数 this 指向的是 Window？ 直接上例子： <div id="app"> {{ myArr | filtersOdd | filter...
Vue filter中使用this的问题
瘾丶病的博客
11-14 1451
Vue filter中使用this的问题。
vue filters过滤器this指向问题的解决方案
Cookie686的博客
08-14 3595
在使用 vue filters过滤器的过程中发现直接用this. 获取需要遍历的数据会报undefined错误，打印this发现输出的是undefined, 想到一下解决方案： 1.全局声明一个变量 2.在生命周期里将this赋值给 that filters过滤器中再次打印that 可以输出想要的结果了 ...
vue中this指向问题
05-21
下面列举了一些常见的 this 指向问题： 1. 在回调函数中，this 指向的可能是调用该函数的对象，而不是当前组件实例。可以使用箭头函数或者使用 Function.prototype.bind() 来解决这个问题。 2. 在生命周期钩子中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值