I have a code for detecting the type that has been input and put into an array. somehow the code ignore the if and else if and jump into the else command
For inputting the type
<!-- Type Input -->
<select v-model="exType">
<option v-for="option in typeOption"> {{option}} </option>
</select>Adding the inputted and putting it into an array
typeOption: ['Income', 'Primer', 'Skunder', 'Tersier'],
},
methods: {
addExpense(exType) {
this.expenseList.unshift({
type: this.exType,
}),
this.exType = '',
},For detecting the type
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
}
}and the CSS class
<style scoped>
.blue{
background-color:#87CEFA;
}
.green{
background-color:#90EE90;
}
.orange{
background-color:#FFA07A;
}
.red{
background-color:#F08080;
}
</style>I have scratched my head on why does this happen
Edit : the get type is called when the table is created
<tbody>
<tr :class="getType(`${expenseList.type}`)" v-for="data in expenseList">
<td> The Data </td>
</tr>
</tbody>Using getType(`${expenseList.type}`) breaks reactivity.
To save reactivity use getType(expenseList.type).
Also, I see issue in this code. It seems to me that there must be getType(data.type).
Also, if it is not really necessary, you can get rid of the first by simply returning the desired result.
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"
}
}