[Vuejs]-How to use v-else statment in the v-for loop in Vuejs?

by

0👍

You will need another computed property that finds whether anything is matching or not in the entire dataset. Then use that computed property like so:

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

Of course, you may use <div> instead of <template>

0👍

You have a few states which you should handle to show the corresponding messages, you need to detect that with some logic

  • No items but loading them
  • Items are empty
  • Have items with no filtering
  • Filtered items, no result

Then use a computed prop to filter out your result, the filtered copy is what you loop over plus it separates the filtered items from the original so you know that the original had items.

For example, (don’t have StatusComponent so it just outputs 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)
  }
}

See example online: https://playcode.io/849492/

Leave a comment