Bagaimana cara menggunakan v-if dan v-else dengan betul dalam v-for dalam 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>

Apabila saya mengklik pada setiap kotak pilihan, saya memuatkan data yang berkaitan dari kotak, lukis tatasusunan. Dengan menyemak data yang sepadan. tatasusunan.

Sekarang, saya ingin menunjukkan bahawa jika data tidak dijumpai apabila mengklik pada kotak semak, saya ingin menunjukkan mesej "Data Tidak Ditemui"

Masalah kod di bawah ialah jika saya meletakkan v-if di bahagian atas dan v-for dan v-else data di hujung, maka hanya sedikit data yang dipaparkan

Answer 1

v-for sedang diberikan untuk setiap "kotak" dalam "kotak", jadi untuk setiap kotak anda harus mendapat satu:

Untuk setiap Paint in Paints, ini sepatutnya menghasilkan div untuk setiap Paint di dalam setiap kotak.

v-if 和 v-else-if 和 v-else 将根据其中包含的谓词有条件地渲染它们的块。我不确定数组 matchingdata 来自您的示例中的位置，但如果它包含具有与 box.bodi 和 paint.paintid 和 paint.paintid 匹配的属性 boxy 和 paintid 的元素，则 matchingdata.some((m ) => m.boxy == box.boxy && m.paintid == Paint.paintid) akan berpuas hati dan div yang berkaitan akan dipaparkan;

Kod anda akan melingkari setiap kotak dalam kotak, dan untuk setiap kotak, ia akan melingkari setiap cat dalam cat untuk mencari elemen dalam data padanan yang serupa dengan:

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

v-for dan (v-if, v-else-if, v-else) blok tidak bersambung antara satu sama lain. v-for mewakili gelung di mana anda akan memberikan elemen untuk setiap item dalam senarai. Blok v-if akan secara bersyarat menjadikan elemen ke halaman berdasarkan predikat yang anda tentukan.

v-if, v-else-if dan v-else mesti muncul serta-merta selepas satu sama lain untuk mengira dalam blok logik yang sama.

Answer 2

Guna lagi matchingdata.some()

Anda boleh menggunakan v-for 循环上方的 v-if 循环中使用 matchingdata.some() dalam gelung v-for di atas gelung v-if yang menyemak sama ada sebarang cat boleh ditemui. Letakkan v-else di bahagian bawah dan sertakan teks anda.

Lihat pembaikan di bawah:

Saya menampal ini ke dalam kotak pasir kod anda dan ia membuatkan mesej muncul sekali sahaja setiap kotak.

Bahagian yang berkaitan sedang digunakan paints.find Prasemak semua cat:

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

Dokumentasi:

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