快捷導(dǎo)航

Vue3中當(dāng)v-if和v-for同時使用時產(chǎn)生的問題和解決辦法

更新時間：2024年07月28日 10:20:57 作者：努力搞米

封裝一個組件時,我使用到了v-for和v-if,它們在同一標(biāo)簽內(nèi),總是提示v-for循環(huán)出來的item在實例中沒有被定義,查詢資料后原因是因為v-for和v-if在同級使用時,v-if優(yōu)先級比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時使用時產(chǎn)生的問題和解決辦法

問題

封裝一個組件時，我使用到了v-for和v-if，它們在同一標(biāo)簽內(nèi)，總是提示v-for循環(huán)出來的item在實例中沒有被定義，查詢資料后原因是因為v-for和v-if在同級使用時，v-if優(yōu)先級比v-for高，所以拿不到v-for循環(huán)出來的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.我們在外層包裹一個 <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中處理

使用計算屬性computed解決，通過數(shù)組方法filter過濾數(shù)組，v-for直接循環(huán)計算屬性后的結(jié)果，就不需要使用v-if了。而且computed是有緩存的，就是在它的依賴沒有變化時，不會再執(zhí)行對應(yīng)計算屬性的回調(diào)函數(shù)，就提高了性能。

// 計算屬性：處理顯示列
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同時使用時產(chǎn)生的問題和解決辦法的文章就介紹到這了,更多相關(guān)Vue3 v-if和v-for同時使用產(chǎn)生的問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue.js學(xué)習(xí)筆記:如何加載本地json文件
這篇文章主要介紹了vue.js學(xué)習(xí)筆記:如何加載本地json文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。
2017-01-01
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧
2023-08-08
Vue實現(xiàn)骨架屏的示例代碼
骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)。本文將利用Vue實現(xiàn)簡單的骨架屏，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
Vue中transition的使用及說明
這篇文章主要介紹了Vue中transition的使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)
最近vue.js 非?；馃?，小編也趁機學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識，于是嘗試做一個像微信平臺里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實現(xiàn)代碼分享給大家，需要的朋友參考下
2018-05-05
vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
這篇文章主要介紹了vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實例形式分析了v-model實現(xiàn)表單input元素數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)
這篇文章主要介紹了vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項目如何解決數(shù)字計算精度問題
這篇文章主要介紹了vue項目如何解決數(shù)字計算精度問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點較多，所以篇幅較長，認真閱覽的你一定會學(xué)到很多知識，需要的朋友可以參考下
2022-09-09
基于Vue 和 iView分片上傳功能實現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術(shù),通過將文件拆分成多個小塊并逐塊上傳,解決了大文件上傳時的諸多問題,如上傳速度慢、超時和網(wǎng)絡(luò)中斷等,它還展示了如何實現(xiàn)分片上傳的進度顯示、錯誤處理和斷點續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧
2025-01-01