例如：<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: ''},
]
},
});
}
}
你不能使用input作为一种组件，并期望它是一个本机输入元素。:is必须命名一个组件（如果需要，可以包含输入）。
那么你必须明白how v-model适用于组件 https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events:
所以对于一个组件来说v-model，应该（这些可以是
在 2.2.0+ 中配置）：
- 接受一个
value prop
- emit an
input具有新值的事件
将所有这些放在一起，您可以使用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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
