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>
这个问题相信很多人都会遇到。