解決vue 局部過濾器獲取不到this的問題
更新時間：2022年01月24日 09:46:17 作者：狗狗狗狗亮
這篇文章主要介紹了解決vue 局部過濾器獲取不到this的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue 局部過濾器獲取不到this
data里面加個字段賦值this。
<el-table-column property="sendLab" label="項目流向" width="*">
<template slot-scope="scope">
<span>
{{ scope.row.sendLab | formataLab(that) }}
</span>
</template>
</el-table-column>
這里用的element table ， 在過濾器里傳入?yún)?shù)，that。
就可以獲取到data里的變量了。
vue filters為什么獲取不到this
問題
<div>{{auditResult | auditResultNameFilter}}</div>
data() {
return {
auditResultOptions: [...]
}
},
filters: {
auditResultNameFilter(status) {
let [obj] = this.auditResultOptions.filter(item => item.value === status);
return obj.name;
}
},
上面會出現(xiàn)報錯
原因
關(guān)于這個問題尤大有講
【this undefined in filters #5998】https://github.com/vuejs/vue/issues/5998
解決方法
我們可以用下面這種寫法、或者用計算屬性跟方法都行，比如下面這種
<div>{{auditResult | auditResultNameFilter(auditResultOptions)}}</div>
filters: {
auditResultNameFilter(status, auditResultOptions) {
let [obj] = auditResultOptions.filter(item => item.value === status);
return obj.name;
}
},
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于多個vue子路由文件自動化合并的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié))
這篇文章主要介紹了vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vueCli4如何配置vue.config.js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue語法和標(biāo)簽使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue.js實現(xiàn)點擊后動態(tài)添加class及刪除同級class的實現(xiàn)代碼
這篇文章主要介紹了vue.js實現(xiàn)點擊后動態(tài)添加class及刪除同級class的相關(guān)資料,需要的朋友可以參考下2018-04-04
本文主要介紹了Vue路由組件通過props配置傳參的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表單單獨移除一個字段驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
element中el-cascader級聯(lián)選擇器只有最后一級可以多選
本文主要介紹了element中el-cascader級聯(lián)選擇器只有最后一級可以多選，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
Vue循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
Vue中進(jìn)行分布式鑒權(quán)與認(rèn)證的過程
在Vue應(yīng)用中，我們通常需要實現(xiàn)分布式鑒權(quán)和認(rèn)證，以確保用戶的安全性和數(shù)據(jù)的保密性，本文將介紹在Vue中如何進(jìn)行分布式鑒權(quán)與認(rèn)證,需要的朋友可以參考下2023-06-06