时间戳

首页 > 解决方案 > b-输入模型具有字符串类型的值

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

问题描述

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

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

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

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

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

{{ typeof testNumber }}  // String

标签： vue.jsbootstrap-vue

解决方案

您可以向 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 问题）。避免使用这些修饰符。

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

为了解决这个问题，<b-form-input>有<b-form-textarea>两个布尔属性trim，number分别模拟原生 Vue v-model 修饰符.trim和.number。

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

推荐阅读