Vue循环使用v-for然后仅在不满足条件时显示

Question

如果在使用 v-for 时不满足条件，我想显示特定消息，我很难显示特定消息。 在我的情况下，产品状态可以是“处理中”、“已交付”或“已完成” 在对正在“处理”的产品使用 v-for 时，我想显示一个消息示例：没有产品

我的问题是，如果我有 2 个产品，那么我会收到 2 次显示的消息..

这是我目前的代码：

<template>
  <div class="">
    <template v-for="(product, index) in products">
      <v-layout row wrap v-if="product.status === 'processing'">
        processing products here
      </v-layout>
      <v-layout>
        There is not product being processed
      </v-layout>
    </template>

  </div>
</template>
<script>

import { mapGetters } from 'vuex'

export default {
  name: 'productPage',
  data () {
    return {
      products: [
        {
          status: 'processing',
          name: 'Product processing'
        },
        {
          status: 'delivered',
          name: 'Product delivered'
        }
      ]
    }
  },
  computed: {
    ...mapGetters({
      filter: 'main/filter'
    })
  }
}
</script>

在我的情况下我应该怎么做？并且仅在不满足任何条件时才显示消息。我也尝试过玩 v-once，但我做不到..

Answer 1

我会创建一个名为 isProcessing 的 computed 属性：

• 如果至少有一种产品正在处理，请返回 true。
• 否则返回false。

在模板中，使用v-if='isProcessing' 显示There is not product being processed 和v-else 显示正在处理的产品列表。

computed: {
    isProcessing: function () {
        return this.products.find( product => product.status === 'processing' ) !== undefined
    }
}