解決vue過濾器filters獲取不到this對象的問題
更新時間：2022年01月23日 11:26:30 作者：天堂の風
這篇文章主要介紹了解決vue過濾器filters獲取不到this對象的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue過濾器filters獲取不到this對象
原理
- 在data中定義一個屬性that，把this存儲到that中
- 在調用filters中的方法sum的時候將that傳進去即可
下面舉個例子
用filters計算data中 a+b 的值
- 注意：filters中的sum方法的第一個參數是|左邊那個a，第二個參數才是括號寫的that
<template>
? <div>{{a|sum(that)}}</div>
</template>
<script>
? export default {
? ? name: "test",
? ? data() {
? ? ? return {
? ? ? ? that: this,
? ? ? ? a: 1,
? ? ? ? b: 2
? ? ? }
? ? },
? ? filters: {
? ? ? sum(a, that) {
? ? ? ? console.log(that);
? ? ? ? return a + that.b;
? ? ? }
? ? },
? }
</script>Vue filters this指向問題
Vue實例中filter不依賴于當前vue實例上下文
所以在filter中無法直接訪問當前vue實例, 所以可以使用computed替代。
可是當遇到需要根據html文本改變，v-for的數據等情況而改變時,computed的功能就無法滿足我們的需求了。
那我們就可以使用methods代替
data: {
? ? shopItemType: {}
},
methods: {?
?? ?shopItemType2str(id){
? ? ? ? return this.shopItemType[id];
? ? }
}<tr v-for="shopItem in shopItems">
?? ?<td>{{shopItemType2str(shopItem.item_type)}}</td>
</tr>以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何使用recorder-core.js實現錄音功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家學習介紹了Vue3如何使用echarts實現繪制儀表盤，文中的示例代碼積極學習，感興趣的小伙伴可以跟隨小編一起學習一下2023-07-07
本文介紹了如何使用uniapp和vue3創(chuàng)建一個手機驗證碼輸入框組件,通過封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實現驗證碼輸入功能,適合需要增加手機驗證碼驗證功能的開發(fā)者參考使用2024-09-09
這篇文章主要介紹了使用Vue.js創(chuàng)建一個時間跟蹤的單頁應用的相關資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了mpvue+vuex搭建小程序詳細教程(完整步驟)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue如何使用jsmind實現生成腦圖,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-03-03
這篇文章主要介紹了用vue簡單的實現點擊按鈕切換背景顏色，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了vue elementUI表格控制顯示隱藏對應列的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue+Element-ui實現登錄注冊表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了Vue如何實現監(jiān)聽組件原生事件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07