Question

例如：foo。

输入过程中

<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"
            >

HTML工作正常：

export default {
init: function (init_data) {

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

Vue控制器：

{{1}}

Answer 1

您不能将input用作某种类型的组件，并期望它是本机输入元素。 :is必须命名一个组件（如果需要，可以包含输入）。

然后你必须理解how v-model works on components：

因此，对于使用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>

Answer 2

strncpy与您可能尝试做的事情无关。看起来您正在尝试动态插入组件。这正是v-model的作用。现在，要将数据传递给组件，您应该使用:is。

例如：

您的Vue实例：

props

注册组件：

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

然后像这样使用它：

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

或者：

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

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

2 个答案: