CODEWITHSUNDEEP
javascripthtmljquerycssvue.js
Jae_JPN
Jae_JPN

Reputation: 19

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

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>

Current Result

Upvotes: 0

Views: 195

Answers (1)

7-zete-7
7-zete-7

Reputation: 745

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

Upvotes: 1

Related Questions