解決vue過濾器filters獲取不到this對象的問題

更新時(shí)間：2022年01月23日 11:26:30 作者：天堂の風(fēng)

這篇文章主要介紹了解決vue過濾器filters獲取不到this對象的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue過濾器filters獲取不到this對象

原理

在data中定義一個(gè)屬性that，把this存儲到that中
在調(diào)用filters中的方法sum的時(shí)候?qū)hat傳進(jìn)去即可

下面舉個(gè)例子

用filters計(jì)算data中 a+b 的值

注意：filters中的sum方法的第一個(gè)參數(shù)是|左邊那個(gè)a，第二個(gè)參數(shù)才是括號寫的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實(shí)例中filter不依賴于當(dāng)前vue實(shí)例上下文

所以在filter中無法直接訪問當(dāng)前vue實(shí)例, 所以可以使用computed替代。

可是當(dāng)遇到需要根據(jù)html文本改變，v-for的數(shù)據(jù)等情況而改變時(shí),computed的功能就無法滿足我們的需求了。

那我們就可以使用methods代替

data: {
? ? shopItemType: {}
},
methods: {?
?? ?shopItemType2str(id){
? ? ? ? return this.shopItemType[id];
? ? }
}

<tr v-for="shopItem in shopItems">
?? ?<td>{{shopItemType2str(shopItem.item_type)}}</td>
</tr>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用recorder-core.js實(shí)現(xiàn)錄音功能
這篇文章主要介紹了vue如何使用recorder-core.js實(shí)現(xiàn)錄音功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
Vue3使用echarts繪制儀表盤
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制儀表盤，文中的示例代碼積極學(xué)習(xí)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-07-07
uniapp中如何基于vue3實(shí)現(xiàn)輸入驗(yàn)證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個(gè)手機(jī)驗(yàn)證碼輸入框組件,通過封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實(shí)現(xiàn)驗(yàn)證碼輸入功能,適合需要增加手機(jī)驗(yàn)證碼驗(yàn)證功能的開發(fā)者參考使用
2024-09-09
使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁應(yīng)用
這篇文章主要介紹了使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁應(yīng)用的相關(guān)資料,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
mpvue+vuex搭建小程序詳細(xì)教程(完整步驟)
這篇文章主要介紹了mpvue+vuex搭建小程序詳細(xì)教程(完整步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
Vue使用jsmind實(shí)現(xiàn)生成腦圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何使用jsmind實(shí)現(xiàn)生成腦圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2024-03-03
vue實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色的示例代碼
這篇文章主要介紹了用vue簡單的實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
vue elementUI表格控制顯示隱藏對應(yīng)列的方法
這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue+Element-ui實(shí)現(xiàn)登錄注冊表單
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實(shí)現(xiàn)登錄注冊表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
Vue如何實(shí)現(xiàn)監(jiān)聽組件原生事件
這篇文章主要介紹了Vue如何實(shí)現(xiàn)監(jiān)聽組件原生事件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07