Vue JS ignore if and else if code and jump straight to else

December 26, 2021

I have a code for detecting the type that has been input and put into an array. some how the code ignore the if and else if and jump into the else command

For inputting the type

<!-- Type Input -->
<div class="form-group">
  <label for="exampleFormControlSelect1">Expenses Type: </label>
  <select class="form-control" id="exampleFormControlSelect1" v-model="exType">
    <option v-for="option in typeOption"> {{option}}</option>
  </select>
</div>

Adding the inputted and putting it into an array

el: '#app',
  data: {
    expenseList: [],
    selected: '',
    typeOption: ['Income', 'Primer', 'Skunder', 'Tersier'],
    exName: '',
    exType: '',
    exDate: '',
    exIn: 0,
    exOut: 0,
    class: ''

  },
  methods: {
    addExpense(exName, exDate, exIn, exOut) {
      this.expenseList.unshift({
          name: this.exName,
          type: this.exType,
          date: this.exDate,
          income: this.exIn,
          expenses: this.exOut
        }),
        this.exName = '',
        this.exType = '',
        this.exDate = '',
        this.exIn = 0,
        this.exOut = 0
    },

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 scrathing my head on why does this happens

Edit :
the get type is called when the table is created

<tbody>
  <tr :class="getType(`${expenseList.type}`)" v-for="data in expenseList">
    <td scope="row"> {{ data.name }} </td>
    <td> {{ data.type }} </td>
    <td> {{ data.date }} </td>
    <td> {{ data.income }} </td>
    <td> {{ data.expenses }} </td>
    <td> <button type="button" v-on:click.prevent="removeExpense" class="btn btn-danger"> Delete </button> </td>
  </tr>
</tbody>

Current Result

>Solution :

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"
  }
}