rollup-plugin-vue
rollup-plugin-vue copied to clipboard
v-model can only be used on <input>, <textarea> and <select> elements.
Version
5.0.0
Reproduction link
Steps to reproduce
Use v-model on any component-based field
What is expected?
VueJS allows you to use v-model on any element which implements the :value data binding and emits the @input event.
You can find this in the official documentation for custom components here: https://vuejs.org/v2/guide/forms.html
And here:
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
The current implementation does not allow for this
What is actually happening?
The resulting behavior is that any component which implements the above pattern results in an error which cannot be built
I believe there should not be a check on v-model on components. Any element can support v-model provided it accepts a value and emits an event, per the Vue2 documentation. It is possible there is something I am missing here, if so, any advice would be appreciated.
Thank you
As a follow up, here is the code we are using:
<form action="" @submit.prevent="">
<div class="" v-for="(field, index) in generateFormFromFields()">
<div
class=""
ref="field"
:field="field"
:key="index"
:is="getFormFieldComponent(field)"
:value="getFieldValue(field)"
:options="getFormFieldOptions(field)"
:errors="getFormFieldErrors(field)"
:model-data="getModelData()"
@change="setFormValues(getFormValues())"
@bulk-change="bulkFieldChange"
@field-submitted="formSubmitted"
@input="() => setFormFields(localValues)"
v-model="localValues[field.field]">
</div>
</div>
</form>
This is used to generate a procedural form.
The initial resulting error is:
Error: v-model can only be used on <input>, <textarea> and <select> elements.
Being cheeky, I changed this to an input, as the component is mounted with :is
:
<form action="" @submit.prevent="">
<div class="" v-for="(field, index) in generateFormFromFields()">
<input
class=""
ref="field"
:field="field"
:key="index"
:is="getFormFieldComponent(field)"
:value="getFieldValue(field)"
:options="getFormFieldOptions(field)"
:errors="getFormFieldErrors(field)"
:model-data="getModelData()"
@change="setFormValues(getFormValues())"
@bulk-change="bulkFieldChange"
@field-submitted="formSubmitted"
@input="() => setFormFields(localValues)"
v-model="localValues[field.field]" />
</div>
</form>
which resulted in:
[!] (plugin vue) Error: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
src\components\form\types\dynamic-form.vue (11:25)
:value="getFieldValue(field)"
Error: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
Which I do not believe to be correct, either. The code itself here works OK.