Vue JS 忽略 if 和 else if 代码并直接跳转到 else答案

【问题标题】：Vue JS ignore if and else if code and jump straight to elseVue JS 忽略 if 和 else if 代码并直接跳转到 else
【发布时间】：2022-01-25 18:19:57
【问题描述】：

我有一个用于检测已输入并放入数组的类型的代码。不知何故，代码忽略了 if 和 else if 并跳转到 else 命令

用于输入类型

<!-- Type Input -->

  <select v-model="exType">
    <option v-for="option in typeOption"> {{option}} </option>
  </select>

将输入的内容添加到数组中

    typeOption: ['Income', 'Primer', 'Skunder', 'Tersier'],

  },
  methods: {
    addExpense(exType) {
      this.expenseList.unshift({
          type: this.exType,
        }),
        this.exType = '',
    },

用于检测类型

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

和 CSS 类

<style scoped>
        .blue{
          background-color:#87CEFA;
        }
        .green{
          background-color:#90EE90;
        }
        .orange{
          background-color:#FFA07A;
        }
        .red{
          background-color:#F08080;
        }
    </style>

为什么会发生这种情况我已经摸不着头脑了

编辑：表创建时调用get类型

<tbody>
  <tr :class="getType(`${expenseList.type}`)" v-for="data in expenseList">
    <td> The Data </td>
  </tr>
</tbody>

Current Result

【问题讨论】：

你能说明getType是如何被调用的以及它的结果是如何被使用的吗？
我已经添加了，在创建body的时候调用
尝试用 getType(data.type) 替换 getType(`${expenseList.type}`) 以获得一些反应
天哪，它成功了，非常感谢@7-zete-7

标签： javascript html jquery css vue.js

【解决方案1】：

使用getType(`${expenseList.type}`) 会破坏反应性。要节省反应性，请使用getType(expenseList.type)。

另外，我在这段代码中看到了问题。在我看来，一定有getType(data.type)。

此外，如果不是真的需要，您可以通过简单地返回所需的结果来摆脱第一个。

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

【讨论】：