Tengo un código para detectar el tipo que se ha ingresado y puesto en una matriz. de alguna manera, el código ignora el if y else if y salta al comando else
Para ingresar el tipo
<!-- Type Input --> <select v-model="exType"> <option v-for="option in typeOption"> {{option}} </option> </select>Agregar lo ingresado y ponerlo en una matriz
typeOption: ['Income', 'Primer', 'Skunder', 'Tersier'], }, methods: { addExpense(exType) { this.expenseList.unshift({ type: this.exType, }), this.exType = '', },Para detectar el tipo
getType(type) { if (type.toLowerCase() == "income") { this.class = "blue" return this.class } else if (type.toLowerCase() == "primer") { this.class = "green" return this.class } else if (type.toLowerCase() == "skunder") { this.class = "orange" return this.class } else { this.class = "red" return this.class } }y la clase CSS
<style scoped> .blue{ background-color:#87CEFA; } .green{ background-color:#90EE90; } .orange{ background-color:#FFA07A; } .red{ background-color:#F08080; } </style>Me he rascado la cabeza sobre por qué sucede esto.
Editar: se llama al tipo get cuando se crea la tabla
<tbody> <tr :class="getType(`${expenseList.type}`)" v-for="data in expenseList"> <td> The Data </td> </tr> </tbody>El uso getType(`${expenseList.type}`) interrumpe la reactividad. Para guardar la reactividad, use getType(expenseList.type) .
Además, veo un problema en este código. Me parece que debe haber getType(data.type) .
Además, si no es realmente necesario, puede deshacerse del primero simplemente devolviendo el resultado deseado.
getType(type) { if (type.toLowerCase() == "income") { return "blue" } else if (type.toLowerCase() == "primer") { return "green" } else if (type.toLowerCase() == "skunder") { return "orange" } else { return "red" } }