v-model can only be used on <input>, <textarea> and <select> elements.

[codebykyle]

Version

5.0.0

Reproduction link

sfc.vuejs.org/

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

[codebykyle]

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.