template syntax error <input :type="type" v-model="xxx">: v-model does not support dynamic input types. Use v-if branches instead.

[wowdeanwu]

Vue.js version

2.0.0-rc.1

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

[fnlctrl]

As the error suggested, v-model does not support dynamic input types, so don't use :type="type"

[wowdeanwu]

i am stuck in this error, someone can help me out ... thx

[wowdeanwu]

ok ... thank you ... i should change the implement ...

[Akryum]

@yyx990803 Is this limitation going to be fixed? Or is there a workaround other than painful/unmaintenable v-if branches?

[akirak]

@Akryum This is a feature introduced in this commit: f35f7e3. It seems that this check is skipped in production.

Perhaps you can bypass this check by defining :value and @input separately instead of v-model, though it may be discouraged: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

[sirlancelot]

A better implementation would be to create your dynamic input type as a component. In Vue 2.x, you can attach v-model to custom components to get two-way data binding.

[gwildu]

@sirlancelot But in that component you would still need to dynamically bind the type, no? Or could the limitation be circumvented by using a custom model?
If not, it would mean you have duplicated code for every type you want to cover. That can get quite messy, especially as those generic components change quite often until you get a more or less stable version.

[akirak]

@gwildu Yes, I encountered the same issue while trying to use an input component in (the development version of) Keen UI: https://josephuspaye.github.io/Keen-UI/#/ui-textbox-docs. After the recent update of Vue.js, now I cannot make it work. A workaround would be to always set the input type to text and validate its value, but it will require work on every similar component.

[gwildu]

@sirlancelot I'm not sure if this is possible but couldn't the old behavior be hidden by an attribute flag like 'generic-type' or 'dynamic-type'? My guess is, that this new behavior has a positive performance impact but that might not be an issue for all projects.

[akirak]

How about implementing a render function in JavaScript? It does not look elegant but probably powerful enough to do almost anything. Actually, it is the way some components are implemented. https://vuejs.org/v2/guide/render-function.html

[sirlancelot]

Thanks for sharing that @akirak, I hadn't personally read that far in the docs yet but it outlines exactly what I had in mind for OP's dynamic input component which I suggested earlier: Create a component which has as many hard-coded inputs as desired and wrap them in a v-if. Abstracting this functionality away in to a component allows re-usability and you don't have to think about its implementation after it's written.

[nkovacs]

Render functions don't support v-model, so you'd have to re-implement v-model essentially, and that doesn't look that simple: https://github.com/vuejs/vue/blob/dev/src/platforms/web/compiler/directives/model.js

[jsfeldman]

The error doesn't seem to appear if you use <component is="input" v-model="m" :type="t" /> and I believe you still get all the functionality.
Is this intentional?

[nkovacs]

You probably don't get all the functionality of v-model.

Unless I'm mistaken, what's going to happen is that you'll get genDefaultModel here: https://github.com/vuejs/vue/blob/dev/src/platforms/web/compiler/directives/model.js#L27

So it won't work properly with select, checkbox and radio.