How to correctly use v-if and v-else in v-for in Vuejs?

Question

<template>
  <div>
    <div v-for="box in boxes" :key="box.id">
      <BaseAccordian>
        <template v-slot:title>{{ box.name }}</template>
        <template v-slot:content>
          <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"
              />
            </div>
            <!-- <div v-else>no data found</div> -->
          </div>
        </template>
      </BaseAccordian>
    </div>
  </div>
</template>

When I click on each checkbox, I am loading the relevant data from the box, draw array. By checking matching data. array.

Now, I want to show that if the data is not found when the checkbox is clicked, I want to show a message "Data not found"

The problem with the code below is that if I put the v-if at the top and the v-for and v-else data at the end, only very little data is displayed

Answer 1

v-for is being rendered for each "box" within "boxes", so for each box you should get one:

For each Paint in Paints, this should render a div for each Paint inside each box.

v-if and v-else-if and v-else will conditionally render their blocks based on the predicates contained within them. I'm not sure where the array matchingdata comes from in your example, but if it contains files with box.bodi and paint.paintid and paint. paintid matches the elements with attributes boxy and paintid, then matchingdata.some((m ) => m.boxy == box.boxy && m. paintid == Paint.paintid) will be satisfied and the associated div will be rendered; otherwise, the 'v-else' div will be rendered (if unannotated).

Your code will loop through each box in boxes, and for each box, it will loop through each paint in paints to find elements in matchingdata similar to:

{
  boxid: ...,
  paintid: ...,
  ...,
}

v-for and (v-if, v-else-if, v-else) blocks are not connected to each other. v-for represents a loop where you will render an element for each item in the list. The v-if block will conditionally render elements to the page based on a predicate you define.

v-if, v-else-if, and v-else must appear immediately after each other to count in the same logical block.

Answer 2

Use again matchingdata.some()

You can use matchingdata.some() inside a v-if loop above the v-for loop that checks if any paint can be found . Place v-else at the bottom and include your text.

See fix below:

I pasted this into your code sandbox and it made the message only appear once per box.

Related parts are using paints.find Pre-check all paints:

matchingdata.some(
  (m) => m.boxid == box.boxid && paints.find( (paint) => m.paintid == paint.paintid )
)

document:

• Array.prototype.some
• Array.prototype.find