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 : v-for="data in expenseList">
    <td> The Data </td>
  </tr>
</tbody>

Current Result

CodePudding user response：

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