b 输入模型具有字符串类型的值

Question

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

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

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

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

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

{{ typeof testNumber }}  // String

Answer 1

您可以向 v-model 添加修改器。

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

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

更新

不要使用v-model.numberthis 作为 bootstrap-vue 建议不要这样做：

v-model 修饰符，.number并且.trim在用户键入时可能导致意外的光标跳转（这是 v-model 在自定义组件上的 Vue 问题）。避免使用这些修饰符。

但是使用 b-form-input 建议：

为了解决这个问题，<b-form-input>并<b-form-textarea>有两个布尔道具trim和number它模仿天然Vue的V型调节剂.trim和.number分别。

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