b-input model has value of type string

Question

I am trying to create a form with a number field.

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

On my data, I have a simple number var.

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

However when I trace testNumber it is a string

{{ typeof testNumber }}  // String

Answer 1

You can add a modifier to the v-model.

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

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

---

UPDATE

Don't use the v-model.number this as bootstrap-vue recommens not to do so:

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.

But use as b-form-input suggests:

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