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

Question

 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>

From the looping, I am getting the data. And i placed the v-if condition, to show content if there is data according to the condition.

And i also, want to set the condition like, If there is no data found i want to show like "no data found". For that i have taken v-else condition. But else condition not working.

If set like above (v-else statement) then it is printing for every data. How to set condition to only show data, When nothing is matching?

Answer 1

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>

Answer 2

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/