Vue:v-model 不适用于动态组件 [英] Vue: v-model doesn't work with dynamic components

问题描述

例如:.

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

我试图解决这个问题已经很长时间了.我查了很多问题和线索，但没有一个对我有帮助.

HTML 不起作用:

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

HTML 工作正常:

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

Vue 控制器:

出口默认{初始化:函数(init_data){返回新的 Vue({数据: {集成数据:[{名称:'field_name0'，组件:'输入'，值:''}，{名称:'field_name0'，组件:'输入'，值:''}，]},});}}

解决方案

您不能将 input 用作一种组件并期望它是本机输入元素.:is 必须命名一个组件(如果需要，它可以包含一个输入).

那你要了解如何v-model 适用于组件:

<块引用>

所以对于一个与 v-model 一起工作的组件，它应该(这些可以是在 2.2.0+ 中配置):

• 接受一个 value 属性
• 使用新值发出 input 事件

综合起来，你可以使用 v-model 和 :is.

new Vue({el: '#app',数据: {集成数据:[{name: '一个',组件:'一个'，价值:'好'}]},成分: {一: {道具:['名称'，'值']，模板:'<div>{{name}} 和 <input v-model="proxyValue"><slot></slot></div>',计算:{代理值:{get() { 返回 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="应用程序"><组件:is="field.component"v-for="(field, key) in integration_data":键=键":name="field.name"v-model="field.value"><div>{{field.value}}</div></组件>

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: ''},
            ]
        },
    });
}
}

解决方案

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.

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" 
    v-for="(field, key) in integration_data" 
    :key="key" 
    :name="field.name" 
    v-model="field.value"
  >
    <div>{{field.value}}</div>
  </component>
</div>

这篇关于Vue:v-model 不适用于动态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！