filters获取data中的数据

filter获取data中数据

在使用vue的过滤器来格式化文本显示时,若直接获取vue中的data中的数据会报错。上网查了下,在vue的filters中使用this引用data中的数据是无法获取的。因为filters中的this指的并非vue的实例。但通过一下方法可以使用。

第一种方式:申明全局变量,改变this方法。

在对应的组件中申明全局变量

在这里插入图片描述

在beforeCreated申明周期中修改this的指向,并在filters中使用。就可以获取data中申明的options数组的值

在这里插入图片描述

第2种方式:可以直接给filter传递参数。

<div>
  <el-table-column label="文章类型">
    <template slot-scope="scope">{{ scope.row.type|formatType(menulist)}}</template>////此处的menulist是data中的数据
  </el-table-column>
</div>
    /**
     * 格式化主题类型
     * @param {*} value 格式化数字
     * @param {*} options 查询所有主题数组
     */
    formatType(value, options) {
        let typeName;
        options.map(res => {
            if (value == res.type) {
                typeName = res.name;
            }
        });
        return typeName;
    },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值