Vue-formulate: int gets converted to string in v-model upon change

[codekiln]

Describe the bug

• Number inputs get their entry in the v-model coerced from a number to a string upon change.
• For example, if you have <FormulateForm v-model="formValues><FormulateInput type="number" name="minValue" /></FormulateForm>, with formValues: { minValue: 1 }, if you change minValue to 2 in the user interface, it becomes formValues: { minValue: "2" } in the model.

To Reproduce
See https://codepen.io/codekiln/pen/LYGdrae

• Change the int in the text input to 2

Expected behavior
Numeric type inputs stay as numbers in the model.

Screenshots

Versions
This is using the latest https://cdn.jsdelivr.net/npm/@braid/vue-formulate/dist/formulate.min.js

Other Relevant Information
This interacts with a Vue-specific issue; see https://stackoverflow.com/a/49749196/78202 shows a workaround when using a model on a single input.

In theory, one can use v-model.number="formValues.scaleMinValue" on the input, but will this interact with the v-model on the parent object in any way?

[atharva3010]

Interesting.
Number input should return a number, not a string. This can possibly cause more issues when we want to direct forms via JSON and send the form submission to API without any manipulations in between.

[justin-schroeder]

Unfortunately it’s not that simple because the HTML spec doesn’t agree. Number inputs return strings from HTML. That’s just the way they work unfortunately. We could certainly have some kind of opt-in behavior like Vue does with the .number modifier but that cant be the default since that isn’t the default for native elements.

Open to suggestions, but my first reaction is this could be handled by the mask hooks discussed in #67. Maybe those should be named “model hooks”

[atharva3010]

Yeah, an opt-in behaviour would be nice!

[gahabeen]

I've just made a PR (#166) to have a modelHook on FormulateInput (available through a schema with FormulateForm too).

It'll be super easy to enforce a value to be integer instead of a stringified one.

I made an example in a test there: https://github.com/wearebraid/vue-formulate/blob/b0dfc0d23c6caff9dd619b208522487ab126b58c/test/unit/FormulateForm.test.js#L803-L826

[gahabeen]

@atharva3010 @codekiln
As it may come only in a later future within vue-formulate itself, I've stabilized the plugin vue-formulate-extended and provided the solution.

Check it out in a live demo: https://codesandbox.io/s/enforce-number-0ctzj?file=/src/components/Sandbox.vue.

[justin-schroeder]

Thanks @gahabeen! Great work. I'm going to close this issue in favor of #67 since that's really what we're talking about here.