Vue中filters使用data的数据

vue 的filters中 this指向的并不是vue实例，但想要获取vue实例中data中的数据，可以在 beforeCreate中将vue实例赋值给定义的全局变量app，然后在filters中通过app代替this来获取data中的数据。

<template>
    <div>
        <div v-for="(item,index) in list" :key="index">
            <p>姓名{{item.name}}</p>
            <p>性别{{item.sex | sexFilter}}</p>
        </div>
    </div>
</template>

<script>
    let vueApp = null
    export default {
        name: 'UserFilters',
        data() {
            return {
                sexOption: [{
                    label: '男', value: 0
                }, {
                    label: '女', value: 1
                }],
                list: [{
                    name: '张三',
                    sex: 0
                }, {
                    name: '李四',
                    sex: 1
                }]
            }
        },
        filters: {
            //性别过滤显示
            sexFilter(data) {
                let resultData = ''
                vueApp.sexOption.forEach(element => {
                    if (element.value == data) {
                        resultData = element.label
                    }
                });
                return resultData
            }
        }
    }
</script>

<style scoped>

</style>

这个问题相信很多人都会遇到。