在项目中使用过滤器想使用data中的数据但是返回的this是undefined :
如何vue 中 filters 如何获取data里的数据
1.声明一个全局变量
letthat;
2.在生命周期beforeCreate里面改变this指向
beforeCreate:function(){that=this;}
3.局部filters中使用
借助案例讲解:
代码:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=,initial-scale=1.0"><title>Document</title><scriptsrc="../vue.js"></script></head><body><divid="app"><divv-for="(item,index)inlist":key="index"><pstyle="color:rgb(219,153,29);">姓名:{{item.name}}</p><pstyle="color:rgb(228,25,143);">性别:{{item.sex|sexFilter}}</p></div></div><script>letthat=null//参数varapp=newVue({el:"#app",//绑定元素//所有数据都放在数据属性中data:{a:{haha:"1111"}},name:'UserFilters',data(){return{sexOption:[{label:'男',value:0},{label:'女',value:1}],list:[{name:'张三',sex:0},{name:'李四',sex:1}]}},beforeCreate:function(){that=this;},filters:{//性别过滤显示sexFilter(data){//console.log(that);letresultData=''that.sexOption.forEach(element=>{if(element.value==data){resultData=element.label}});returnresultData}}})</script></body></html>