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>

這個問題相信很多人都會遇到。