使用 v-model.number 將 String 轉成 Number | 點燈坊

儘管原始數據為 Number，<input type="text"> 只要輸入後就會變成 String，這會造成如 Computed 內的 + 錯誤，最簡單的方式是在 v-model 加上 .number modifier，Vue 會自動幫我們將 String 轉成 Number，避免 + 的運算錯誤。

Version

Vue 2.7

v-model.number

<template>
  <div>
    <input type="text" v-model.number="score1">
    <input type="text" v-model.number="score2">
    {{ total }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      score1: 0,
      score2: 0
    }
  },
  computed: {
    total() {
      return this.score1 + this.score2
    }
  }
}
</script>

Line 11

data() {
  return {
    score1: 0,
    score2: 0
  }
},

• 在原始數據，已經將 score1 定義為 Number。

Line 3

<input type="text" v-model.number="score1">

• 但在 <input type="text"> 內，只要經過輸入後，score1 就會變成 String
• 改成 v-model.number 之後，Vue 會自動將 String 又轉回 Number

Line 17

computed: {
  total() {
    return this.score1 + this.score2
  }
}

• 如此就可在 method 或 computed 內直接使用 +，而不用擔心數據被改成 String 而造成 + 的運算錯誤

Conclusion

• 當然可以自行使用 Number() 將 String 又轉回 Number，但 Vue 所提供的 number modifier 是最優雅的解決方案