Vue: v-model doesn't work with dynamic components

Viewed 9371

For example: <component v-model='foo' :is='boo' ...>.

foo's value stays the same during input.

I'm trying to solve the issue for quite a long time. I've checked lots of questions and threads but none of those helped me.

HTML doesn't work:

            <component
                :is="field.component"
                :key="key"
                :name="field.name"
                v-for="(field, key) in integration_data"
                v-model="field.value"
            >
            </component>

HTML works fine:

            <input
                :key="key"
                :name="field.name"
                v-for="(field, key) in integration_data"
                v-model="field.value"
            >

Vue controller:

export default {
init: function (init_data) {

    return new Vue({
        data: {
            integration_data: [
              {name: 'field_name0', component: 'input', value: ''},
              {name: 'field_name0', component: 'input', value: ''},
            ]
        },
    });
}
}
2 Answers
Related