Since v3.1.0, vue-multiselect has had the required prop which states:
Passes the Boolean value to the inbuilt input element
There is also the name prop:
Name attribute to match optional label element
This makes is sound like an input element is already present there but I can't get any values when I submit the element through a form along with other input elements. This is multiselect element:
<vue-multiselect
name="employees[]"
v-model="selectedStaff"
:multiple="true"
:options="staff"
label="name"
track-by="id"
:close-on-select="false"
placeholder="Select staff members"
{{-- :required="true" --}}
></vue-multiselect>
The frontend looks fine but in the back-end, the employees item is an always an array with just one element in it which has the value null.
Also, if I uncomment the :required="true" part, I can't submit the form at all, even after selecting a bunch of options. I always get the pop-up to fill in the field. So something is causing the selected options to not be in any input field.
The solution (or workaround) is adding a separate hidden input which uses the values from the mutliselect as stated here. But is really the only way?