<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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
v-forsedang 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.
Guna lagi
matchingdata.some()Anda boleh menggunakan
v-for循环上方的v-if循环中使用matchingdata.some()dalam gelungv-fordi atas gelungv-ifyang menyemak sama ada sebarang cat boleh ditemui. Letakkanv-elsedi 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.findPrasemak semua cat:Dokumentasi: