Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法
問(wèn)題
封裝一個(gè)組件時(shí)，我使用到了v-for和v-if，它們?cè)谕粯?biāo)簽內(nèi)，總是提示v-for循環(huán)出來(lái)的item在實(shí)例中沒(méi)有被定義，查詢資料后原因是因?yàn)関-for和v-if在同級(jí)使用時(shí)，v-if優(yōu)先級(jí)比v-for高，所以拿不到v-for循環(huán)出來(lái)的item。
<el-table-column
align="center"
v-for="item in tableData"
v-if="item.show"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable ? 'custom' : false"
:width="item.width"
:formatter="item.formatter"
class="tooltip-column"
>
</el-table-column>
解決辦法：
1.我們?cè)谕鈱影粋€(gè) <template> ，先去循環(huán)再去判斷，這樣v-if就可以正常使用了
<template v-for="item in columns">
<el-table-column
align="center"
v-if="item.show"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable ? 'custom' : false"
:width="item.width"
:formatter="item.formatter"
class="tooltip-column"
>
</el-table-column>
</template>2.不使用template標(biāo)簽，我們可以在script中處理
使用計(jì)算屬性computed解決，通過(guò)數(shù)組方法filter過(guò)濾數(shù)組，v-for直接循環(huán)計(jì)算屬性后的結(jié)果，就不需要使用v-if了。而且computed是有緩存的，就是在它的依賴沒(méi)有變化時(shí)，不會(huì)再執(zhí)行對(duì)應(yīng)計(jì)算屬性的回調(diào)函數(shù)，就提高了性能。
// 計(jì)算屬性：處理顯示列
const tableColumns = computed(() => {
return props.columns.filter((item) =>
typeof item.show === "undefined" ? true : item.show
);
});<el-table-column
align="center"
v-for="item in tableColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable ? 'custom' : false"
:width="item.width"
:formatter="item.formatter"
class="tooltip-column"
>
</el-table-column>到此這篇關(guān)于Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法的文章就介紹到這了,更多相關(guān)Vue3 v-if和v-for同時(shí)使用產(chǎn)生的問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js學(xué)習(xí)筆記:如何加載本地json文件
這篇文章主要介紹了vue.js學(xué)習(xí)筆記:如何加載本地json文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。2017-01-01
Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí),如果單文件上傳是比較簡(jiǎn)單的,但是在實(shí)際需求中,往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù),怎么操作呢,下面通過(guò)示例代碼講解感興趣的朋友一起看看吧2023-08-08
骨架屏就是在頁(yè)面數(shù)據(jù)尚未加載前先給用戶展示出頁(yè)面的大致結(jié)構(gòu)。本文將利用Vue實(shí)現(xiàn)簡(jiǎn)單的骨架屏，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
這篇文章主要介紹了Vue中transition的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(一)
最近vue.js 非?；馃幔【幰渤脵C(jī)學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識(shí)，于是嘗試做一個(gè)像微信平臺(tái)里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號(hào)菜單編輯器功能的實(shí)現(xiàn)代碼分享給大家，需要的朋友參考下2018-05-05
vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實(shí)例形式分析了v-model實(shí)現(xiàn)表單input元素?cái)?shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue-router嵌套路由方式(頁(yè)面路徑跳轉(zhuǎn)但頁(yè)面顯示空白)
這篇文章主要介紹了vue-router嵌套路由方式(頁(yè)面路徑跳轉(zhuǎn)但頁(yè)面顯示空白)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目如何解決數(shù)字計(jì)算精度問(wèn)題
這篇文章主要介紹了vue項(xiàng)目如何解決數(shù)字計(jì)算精度問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長(zhǎng)，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下2022-09-09
基于Vue 和 iView分片上傳功能實(shí)現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術(shù),通過(guò)將文件拆分成多個(gè)小塊并逐塊上傳,解決了大文件上傳時(shí)的諸多問(wèn)題,如上傳速度慢、超時(shí)和網(wǎng)絡(luò)中斷等,它還展示了如何實(shí)現(xiàn)分片上傳的進(jìn)度顯示、錯(cuò)誤處理和斷點(diǎn)續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧2025-01-01