¿Qué significa este error?
esto sucede cuando pongo mi variable filteredData dentro de la etiqueta tr de la tabla.
<table id="table"> <tr> <th>First name</th> <th>Last Name</th> <th>Email</th> <th>Original email</th> <th>Actions</th> </tr> <template> <tr v-if="(fiteredData = '')"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr v-else v-for="data in filteredData" :key="data.ind_id" :value="data.ind_id" > <td>{{ data.first_name }}</td> <td>{{ data.last_name }}</td> <td>{{ data.email }}</td> <td>{{ data.email }}</td> <td> <button @click="sendProps(data)"> <i class="fa-regular fa-edit" aria-hidden="true"></i> </button> </td> </tr> </template> </table>Este es mi método:
data() { return { fetchedData: "", filteredData: "", }; }, methods: { searchResult(e) { this.filteredData = this.fetchedData.filter((data) => { return data.email.toLowerCase().includes(this.email.toLowerCase()); }); e.preventDefault(); console.log(this.filteredData); }fetchedData obtener los datos de esto:
async mounted() { await axios.get("http://localhost:5000/individuals").then((result) => { this.fetchedData = result.data; console.log(this.fetchedData); }); },Supongo que esto: <tr v-if="(filteredData = '')"> debería ser: <tr v-if="filteredData === ''"> , o incluso mejor: v-if="!filteredData.length" . Ha escrito mal el nombre de la variable y accidentalmente lo está configurando en una cadena vacía en lugar de hacer una comparación (todos hemos estado allí, estoy seguro)
En una nota relacionada, inicializaría fetchedData y filteredData como matrices vacías, no cadenas, porque v-for está destinado a iterar sobre objetos y matrices, no cadenas (aunque probablemente sea lo suficientemente inteligente como para manejarlo).