在下面的例子中,为什么v-model没有绑定到我的输入?<component>
有限制吗?
<script setup>
import { ref } from 'vue'
const config = ref({
headers: [
{ field: 'id', label: 'Id', component: { type: 'input' } },
{ field: 'name', label: 'Name', component: { type: 'input' } },
// more configs for radio buttons and other custom components
],
data: [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' }
]
})
</script>
<template>
<table>
<tr>
<td v-for="header in config.headers">
<b>{{ header.label }}</b>
</td>
</tr>
<tr v-for="item in config.data">
<td v-for="header in config.headers">
<component :is="header.component.type" v-model="item[header.field]" />
</td>
</tr>
</table>
{{ config.data }}
</template>
1条答案
按热度按时间zlhcx6iw1#
Vue
v-model
对于原生元素确实工作得很好。但它显然无法与
<component :is
一起工作您的代码生成
快速的解决方法是直接实现
value
的绑定。但是,您需要相应地更新组件,以便使用
value
而不是modelValue
。更新
使用
v-model:value
的解决方法只能以一种方式工作,与:value
相同。