vue.js - b-输入模型具有字符串类型的值

Question

我正在尝试创建一个带有数字字段的表单。

<b-input v-model="testNumber" type="number"/>

在我的数据中，我有一个简单的数字变量。

data() {
  return {
    testNumber: 10,
  }
},

但是当我跟踪 testNumber 时它是一个字符串

{{ typeof testNumber }}  // String

Answer 1

您可以向 v-model 添加修饰符。

( https://v2.vuejs.org/v2/guide/forms.html#number )

<b-form-input v-model.number="testNumber" />

---

更新

不要使用 v-model.number这是 bootstrap-vue 建议不要这样做:

v-model modifiers .number and .trim can cause unexpected cursor jumps when the user is typing (this is a Vue issue with v-model on custom components). Avoid using these modifiers.

但按照 b-form-input 的建议使用:

To get around this, <b-form-input> and <b-form-textarea> have two boolean props trim and number which emulate the native Vue v-model modifiers .trim and .number respectively.

<b-form-input v-model="testNumber" :number="true" />