v-model with Arrays and Sets - documentation and why only for checkboxes?
What problem does this feature solve?
Firstly, it took a bit of digging to work out that Set
objects were supported for v-model
with multiple checkboxes. It would be great to get that mentioned in the docs (hopefully I haven't just missed it.. "set" is pretty impossible to search for).
Unless I'm mistaken, it seems that the v-model
magic to put data into Set
s and Array
s only comes into effect when the element is a native checkbox input.. and only in that case.
This seems a little surprising. I understand that one half of v-model
is the understanding of how to sensibly get/react to the value of a native input element, so there is logic that decides what to do depending on whether an element is a checkbox/radio button/text input.. but how that data is then stored on the component seems almost unrelated to what kind of element the v-model
directive is on.
Is it naive of me to think that any use of v-model
where multiple uses point to the same model prop could trigger Array
based storage? I guess it's hard to know what the user is trying to do, they may be trying to bind multiple elements to the same shared value.
It did surprise me, that if you try and use the "multi checkbox" style with non-checkbox elements, and an Array
model property, there is no warning, all the elements just share a single state. https://codepen.io/johtso/pen/ExZegRX
I wonder if it would be more desirable for there to be some way to explicitly indicate that you want to have multiple v-model
s going into a single Array
, rather than it being guessed. It would make the behaviour a little less magic, and it would also allow the neat logic to be used for any kind of element. Seems a shame for the native elements to be "special".
What does the proposed API look like?
Documentation of v-model
binding to Sets
.
Explicit v-model
syntax/option for multiple element values -> single Array
behaviour?
Documentation of v-model binding to Sets.
If I remember correctly, we already have some ideas about documentation
Explicit v-model syntax/option for multiple element values -> single Array behaviour?
Why are you surprised? Regardless of other aspects, consider how the browser sends form data? And how does the server read the form data sent by the browser?
For the checkbox with the same name, the server reads it as an array. This is a bit like multiple checkboxes bound to the same variable, assuming that the name of the variable is val
, so it is natural that the value of val
is an array.
Multiple text input boxes are bound to the same variable and will share the same value, which is the expected behavior. And your suggestion is a breaking change, and more importantly, that is not correct behavior.
BTW, you can ask questions on the forum, the Discord server or StackOverflow first.