解決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 , 在過濾器裡傳入參數,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; } },
上面會出現報錯
原因
關於這個問題尤大有講
【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; } },
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- element ui表格實現下拉篩選功能
- 關於el-table表格組件中插槽scope.row的使用方式
- vue中實現可編輯table及其中加入下拉選項
- vue中filter的應用場景詳解
- vue中的slot-scope及scope.row用法