Vue:v-model不适用于动态组件

Question

例如:<component v-model='foo' :is='boo' ...>.

foo输入期间的值保持不变.

我试图解决这个问题很长一段时间.我查了很多问题和线索,但没有一个帮助过我.

HTML不起作用:

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

HTML工作正常:

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

Vue控制器:

export default {
init: function (init_data) {

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

Answer 1

您不能将其input用作某种类型的组件,并期望它是本机输入元素.:is必须为组件命名(如果需要,可以包含输入).

然后,你必须了解如何v-model在组件协同工作:

因此,对于要使用的组件v-model,它应该(这些可以在2.2.0+中配置):

• 接受value道具
• input使用新值发出事件

把它们放在一起,就可以使用v-model了:is.

new Vue({
  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() { return this.value; },
          set(newValue) { this.$emit('input', newValue); }
        }
      }
    }
  }
});

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