Subscribe on changes!

v-model with Arrays and Sets - documentation and why only for checkboxes?

avatar
Apr 18th 2021

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 Sets and Arrays 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-models 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?

avatar
Apr 20th 2021

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.