Vue-formulate: Select doesn't work with integer values

[danielkellyio]

Describe the bug
The select input won't accept integers as values for the options.

To Reproduce
See codepen

Reproduction
https://codepen.io/danielkdesigner/pen/yLOdqvo

Expected behavior
The integer options to works just as well as the string options

Screenshots
If applicable, add screenshots to help explain your problem.

Device information:

• Device: Macbook Pro
• OS: macOS Catalina 10.15.7
• Browser: Firefox (81) and chrome (85)

[acemir]

I also had this problem on a project that I was working on.

As a workaround, I moved the v-model property from the FormulateForm to each FormulateInput.

Workaround
https://codepen.io/acemir/pen/rNeEbKb

[justin-schroeder]

Hi @danielkellyio, unfortunately HTML inputs only support string values. If you think about it, there's no way to write an html select input with integer values:

<select>
  <option value="1"></option>
</select>

Vue does a little coercing on these in its attribute mapping, but it does cause erratic results. In general though, if you stick with string values you'll be good to go. Ive gotten this bug report several times now, so if anyone has any suggestions on how to make other value types actually work im all ears :)

[danielkellyio]

@acemir that does make the DOM element appear to work correctly but it looks like the data is no longer bound (inspect the value of the data)

@justin-schroeder perhaps this is out of the scope of what vue formulate is striving for but vue multi-select (https://vue-multiselect.js.org/#sub-single-select) is able to handle options of non-string value types. I understand the simplicity of just sticking to the html5 select under the hood but if this issue comes up enough perhaps approaching the select as vue multi-select has would be helpful (or maybe there is a vue-multiselect custom vue-formulate field already out there...)

Thanks!

[justin-schroeder]

@danielkellyio yeah, vue-multiselect is very cool. It's not using native html which is why it can get away with that kind of stuff. The same would is true for vue-formulate if you write a custom input, I haven't tried it, but it seems pretty feasible to even use multi-select inside vue-formulate. Would make a good plugin.

But from Vue Formulate's perspective... there will be more to say on these kind of inputs to come 😉

[acemir]

@acemir that does make the DOM element appear to work correctly but it looks like the data is no longer bound (inspect the value of the data)

@danielkellyio You're right. The data is not actually updated. In fact, I used a slightly different approach in my project because I only needed to use the values after submitting the form. The values within the data, I really used it only as initial values.

I updated the pen https://codepen.io/acemir/pen/rNeEbKb to better demonstrate the way I used it. It worked for my needs but the problem with the data not updating still occurs.