Según el bucle, obtengo los datos. En este bucle, filtré la matriz y solo mostré las coincidencias requeridas.
Así que tomé la condición v-if y mostré las coincidencias relevantes. Pero cuando traté de colocar v-else , también está en bucle para buscar datos coincidentes.
Quiero mantener una condición como, cuando no se encuentran datos para el campo requerido, entonces necesito mostrar el mensaje de no encontrar coincidencias.
Necesitará otra propiedad calculada que encuentre si algo coincide o no en todo el conjunto de datos. Luego usa esa propiedad calculada así:
<template v-if="anythingMatching"> ...your current code... </template> <template v-else> <div>sa</div> </template> Por supuesto, puede usar <div> en lugar de <template>
Tiene algunos estados que debe manejar para mostrar los mensajes correspondientes, necesita detectar eso con algo de lógica
Luego use un accesorio calculado para filtrar su resultado, la copia filtrada es lo que recorre y además separa los elementos filtrados del original para que sepa que el original tenía elementos.
Por ejemplo, (no tiene StatusComponent, por lo que solo genera 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" class="line"> {{ 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) } }Ver ejemplo en línea: https://playcode.io/849492/