[Vue warn]: Invalid prop: type check failed for prop "value".

[krasendimitrov]

In RC-11 no warning is being displayed. RC-12 introduced the property "number" for b-form-input to convert to a native number object, since html5 form input expect and return a string.
This implies that Number should be a valid prop type for the component.
I believe this a issue caused by the introduction of the form-text mixin.
The warning occurs naturally only in development mode.

Code:

<template>
  <div>
    <b-form-input v-model="n" type="number" number placeholder="Enter your number" />
    <div class="mt-2">Value: {{ n }}</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        n: 5
      }
    }
  }
</script>

Warning message:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "value". Expected String with value "5", got Number with value 5.

found in

---> <BFormInput>
       <NumberField> at src/components/NumberField.vue
         <App> at src/App.vue
           <Root>

• OS Windows 10, Arch x64, latest Chromium and Firefox
• Testcase cannot work in the playground since it uses the production version of Vue, so no warnings are displayed. If you require one i can create a project in my repo.
• dependencies

...
  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.12",
    "vue": "^2.6.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.13.0",
    "eslint-plugin-vue": "^5.2.1",
    "vue-template-compiler": "^2.6.6"
  }
 ...

[GerkinDev]

I'm having the same problem. The issue is in the mixins mechanism that is added with the v2.0.0.

The mixin's property in question is here:

bootstrap-vue/src/mixins/form-text.js

Lines 8 to 11 in 8bc0037

	value: {
	type: String,
	default: ''
	},

It is then merged with the component here:

bootstrap-vue/src/components/form-input/form-input.js

Lines 33 to 41 in 8bc0037

	mixins: [
	idMixin,
	formMixin,
	formSizeMixin,
	formStateMixin,
	formTextMixin,
	formSelectionMixin,
	formValidityMixin
	],

So, what would be the best option? Have several components, each with a property type, or just accept any or multiple types for the value prop ? The merged PR (#2583) allows both Number & String, but is it really the best approach to have the safest type checking?

I'm actually thinking about other field inputs, like Date (or even Radio or Checkbox).

A Date input could have a min & max property, both of type Date. A numeric input could have the same props, but with type Number. So wouldn't it be convinient to split each input type, using mixin factories, so that each sub-input is as much precise as possible, but still keeping the generic input without (or with permissive) type validation ?

[tmorehouse]

HTML5 <input type="date"> always returns the value as a String (the value is not parsed into a date Object).

Not all input types are supported by all browsers, and fallback to type text.

The Number typecheck was added in for the new number modifier prop (that emulates the behaviour of the Vue .number v-model modifier.