Vue: V-model Doesn't Work With Dynamic Components

For example: . 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 que

Solution 1:

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

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

So for a component 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.

newVue({
  el: '#app',
  data: {
    integration_data: [{
      name: 'one',
      component: 'one',
      value: 'ok'
    }]
  },
  components: {
    one: {
      props: ['name', 'value'],
      template: '<div>{{name}} and <input v-model="proxyValue"><slot></slot></div>',
      computed: {
        proxyValue: {
          get() { returnthis.value; },
          set(newValue) { this.$emit('input', newValue); }
        }
      }
    }
  }
});

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

Solution 2:

v-model has nothing to do with what you're possibly trying to do. It looks like you are trying to insert components dynamically. That's exactly what :is does. Now, to pass data to the component, 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 component'
  }
})

Register a component:

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

Then use it like this:

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

Or:

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