<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>Cuando hago clic en cada casilla de verificación, estoy cargando datos relevantes del cuadro, matriz de pintura. comprobando datos coincidentes. Formación.
Ahora, quiero mostrar, si no se encontraron datos al hacer clic en la casilla de verificación, quiero mostrar un mensaje como "no se encontraron datos"
El problema con el siguiente código es que si coloco v-if en la parte superior y v-for y v-else data en el último, solo se muestran algunos datos
la verificación v-if está ok y not ok debe escribirse antes del bucle for exterior
(antes de esta fila <div v-for="paint in paints" :key="paint.id" class="line"> )
entonces todo el código debería ser algo como esto:
<div v-if="your data existence checking ....."> <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> </div> <div v-else>no data found</div>matchingdata.some() nuevo Puede usar matchingdata.some() en un v-if sobre el bucle v-for , que verifica si se puede encontrar alguna de las pinturas. Ponga un v-else en la parte inferior con su texto.
Ver arreglo a continuación:
<template> <div> <div v-for="box in boxes" :key="box.id"> <BaseAccordian> <template v-slot:title>{{ box.name }}</template> <template v-slot:content> <template v-if=" matchingdata.some( (m) => m.boxid == box.boxid && paints.find( (paint) => m.paintid == paint.paintid ) ) " > <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> </template> <div v-else>no data found</div> </template> </BaseAccordian> </div> </div> </template>Pegué esto en su espacio aislado de código e hizo que el mensaje solo apareciera una vez por cuadro.
La pieza relevante es verificar todas las pinturas de antemano con paints.find :
matchingdata.some( (m) => m.boxid == box.boxid && paints.find( (paint) => m.paintid == paint.paintid ) )Documentación:
El v-for se representa para cada 'caja' en 'cajas', por lo que para cada caja debe obtener un:
<BaseAccordian> <template v-slot:title>{{ box.name }}</template> <template v-slot:content> <div v-for="paint in paints" :key="paint.id" class="line"> {...} </div> </template> </BaseAccordian>Y para cada pintura en pinturas, esto debería generar un div para cada pintura dentro de cada caja.
El v-if y v-else-if y v-else representarán sus bloques condicionalmente en los predicados contenidos dentro de ellos. No estoy seguro de dónde proviene la matriz matchingdata en su ejemplo, pero si contiene un elemento que tiene las propiedades boxid y paintid que coinciden con box.boxid y paint.paintid entonces el predicado de matchingdata.some((m) => m.boxid == box.boxid && m.paintid == paint.paintid) se habrá cumplido y se representará el div asociado; de lo contrario, se representará el div 'v-else' (si no estuviera comentado).
Su código recorrerá cada cuadro en cuadros, y para cada cuadro recorrerá cada pintura en pinturas para encontrar un elemento en los datos coincidentes que se parezca a:
{ boxid: ..., paintid: ..., ..., }Los bloques v-for y (v-if, v-else-if, v-else) no están conectados entre sí. v-for representa un bucle sobre el que representará un elemento para cada elemento de la lista. Los bloques v-if representarán condicionalmente los elementos en la página de acuerdo con los predicados que defina.
v-if, v-else-if y v-else deben aparecer uno tras otro para contarse en el mismo bloque lógico.