For example: <ponent 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:

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

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', ponent: 'input', value: ''},
              {name: 'field_name0', ponent: 'input', value: ''},
            ]
        },
    });
}
}

For example: <ponent 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:

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

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', ponent: 'input', value: ''},
              {name: 'field_name0', ponent: 'input', value: ''},
            ]
        },
    });
}
}

• javascript
• vue.js
• vuejs2
• vue-ponent

• github./vuejs/vue/issues/4763 – thanksd Commented Jun 30, 2017 at 17:41

2 Answers 2

You can't use input as a type of ponent and expect it to be a native input element. :is must name a ponent (which can contain an input, if you want).

Then you have to understand how v-model works on ponents:

So for a ponent to work with v-model, it should (these can be configured in 2.2.0+):

• accept a value prop
• emit an input event with the new value

Putting that all together, you can use v-model with :is.

new Vue({
  el: '#app',
  data: {
    integration_data: [{
      name: 'one',
      ponent: 'one',
      value: 'ok'
    }]
  },
  ponents: {
    one: {
      props: ['name', 'value'],
      template: '<div>{{name}} and <input v-model="proxyValue"><slot></slot></div>',
      puted: {
        proxyValue: {
          get() { return this.value; },
          set(newValue) { this.$emit('input', newValue); }
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare./ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <ponent 
    :is="field.ponent" 
    v-for="(field, key) in integration_data" 
    :key="key" 
    :name="field.name" 
    v-model="field.value"
  >
    <div>{{field.value}}</div>
  </ponent>
</div>

v-model has nothing to do with what you're possibly trying to do. It looks like you are trying to insert ponents dynamically. That's exactly what :is does. Now, to pass data to the ponent, you should use props.

For example:

Your Vue instance:

const vm = new Vue({
  el: '#app',
  data: {
    exampleValue: 'This value will be passed to the example ponent'
  }
})

Register a ponent:

Vue.ponent('example-ponent', {
  // declare the props
  props: ['value'],
  template: '<span>{{ value}}</span>'
})

Then use it like this:

<example-ponent :value="exampleValue"></example-ponent>

Or:

<ponent :is="'example-ponent'" :value="exampleValue"></ponent>