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

我会创建一个名为computed的{{1}}属性：

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

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

v-else

使用v-for的Vue循环仅在没有满足条件时显示

1 个答案: