title: Vue loop using v-for then display only if no condition met
body: <p>I am having hard time displaying a specific message if while using v-for the condition is not met I want to display a specific message. 
  In my case an product status can be 'processing', 'delivered' or 'completed'
  While using v-for for products which are 'processing' I want to display an message example: No product</p>
  
  <p>The problem in my case is that if I have 2 products then I get the message 2 time displayed.. </p>
  
  <p>This is my code so far:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class=""&gt;
      &lt;template v-for="(product, index) in products"&gt;
        &lt;v-layout row wrap v-if="product.status === 'processing'"&gt;
          processing products here
        &lt;/v-layout&gt;
        &lt;v-layout&gt;
          There is not product being processed
        &lt;/v-layout&gt;
      &lt;/template&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  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'
      })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>How should I do this in my case? And show the message only if no condition is met. I also tried to play around with v-once but I couldn't make it.. </p>