如何在Vuejs的v-for回圈中使用v-else陳述句？

computed: {
    status() {
      const box = this.box;
      const paint = this.paint;
      const matchingdata = this.matchingdata.filter(
        (m) => m.boxid == box.boxid && m.paintid == paint.paintid
      )[0];
    }

<div v-for="paint in paints" :key="paint.id" class="line">
  <div v-if="
                matchingdata.some(
                  (m) => m.boxid == box.boxid && m.paintid == paint.paintid
                )
              ">
    <StatusComponent :box="box" :paint="paint" :matchingdata="matchingdata" />
    <!--only status like ok,not, medium to be printed on line accordingly -->
  </div>
  <div v-else>sa</div> //ITS NOT WORKING
</div>

從回圈中，我正在獲取資料。并且我放置了 v-if 條件，以根據條件顯示內容是否有資料。

而且我也想設定這樣的條件，如果沒有找到資料，我想顯示為“沒有找到資料”。為此，我采用了 v-else 條件。但其他條件不起作用。

如果像上面一樣設定（v-else 陳述句），那么它會為每個資料列印。如何設定條件只顯示資料，當沒有匹配時？

uj5u.com熱心網友回復：

您將需要另一個計算屬性來查找整個資料集中是否有匹配項。然后像這樣使用該計算屬性：

<template v-if="anythingMatching">
 ...your current code...
</template>
<template v-else>
  <div>sa</div>
</template>

當然，你可以使用<div>代替<template>

uj5u.com熱心網友回復：

您應該處理一些狀態以顯示相應的訊息，您需要使用一些邏輯來檢測

• 沒有專案，但正在加載它們
• 物品為空
• 有沒有過濾的專案
• 過濾的專案，沒有結果

然后使用計算道具過濾出您的結果，過濾后的副本是您回圈的內容，并將過濾后的專案與原始專案分開，以便您知道原始專案有專案。

例如，（沒有 StatusComponent 所以它只輸出 json）

<div id="app">
  search <input v-model="filter.search"/>
  box 1 <input type="radio" v-model="filter.box" :value="1">
  box 2 <input type="radio" v-model="filter.box" :value="2">

  <div v-if="!loading">
    <template v-if="filtered_paints.length">
      <div v-for="(paint, index) in filtered_paints" :key="paint.id" class="line">
        {{ index }}: 
        {{ filter.search ? 'searched: '   filter.search : '' }} 
        {{ filter.box ? 'in box: '   filter.box : '' }}
        {{ paint }}
      </div>
    </template>
    <template v-else>
      <div v-if="!paints.length">
        There was an issue loading paints.
      </div>
      <div v-else>
        No matching paints, for: 
        {{ filter.search ? filter.search : '' }} 
        {{ filter.box ? 'in box: '   filter.box : '' }}
      </div>
    </template>
  </div>
  <div v-else>
    Loading paints...
  </div>
</div>

{
  data() {
    return {
      loading: true,
      filter: {
        search: '',
        box: 0
      },
      paints: [],
    };
  },
  computed: {
    filtered_paints() {
      return this.paints.filter((i) => {
        if (!this.filter.box && this.filter.search === '') {
          return true
        }

        let found = false
        if (this.filter.box && this.filter.search) {
          if (i.boxid === Number(this.filter.box) && i.name.startsWith(this.filter.search)) {
            found = true
          }
          return found
        }

        if (this.filter.box && i.boxid === Number(this.filter.box)) {
          found = true
        }

        if (this.filter.search && i.name.startsWith(this.filter.search)) {
          found = true
        }
        return found
      })
    }
  },
  mounted() {
    console.log('Mock loading some paints');
    setTimeout(() => {
      this.paints = [
        { id: 1, paintid: 1, boxid: 1, name: 'white' },
        { id: 2, paintid: 2, boxid: 2, name: 'black' }
      ]
      this.loading = false
    }, 2000)
  }
}

在線查看示例：https : //playcode.io/849492/

標籤：

上一篇：如何在Vue3 i18n中匯入多個語言環境json檔案？

下一篇：Vuetify3是否支持表格和選項卡？