Vue3中當v-if和v-for同時使用時產生的問題和解決辦法

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

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

問題

封裝一個組件時，我使用到了v-for和v-if，它們在同一標簽內，總是提示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標簽，我們可以在script中處理

使用計算屬性computed解決，通過數(shù)組方法filter過濾數(shù)組，v-for直接循環(huán)計算屬性后的結果，就不需要使用v-if了。而且computed是有緩存的，就是在它的依賴沒有變化時，不會再執(zhí)行對應計算屬性的回調函數(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>

到此這篇關于Vue3中當v-if和v-for同時使用時產生的問題和解決辦法的文章就介紹到這了,更多相關Vue3 v-if和v-for同時使用產生的問題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: