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

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" >
  <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?

CodePudding user response：

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>

CodePudding user response：

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" >
        {{ 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/