v-model not working with <component> in Vue 3?
P粉806834059
2023-08-29 20:16:20
<p>为什么在下面的示例中 v-model 没有绑定到我的输入? <code><component></code> 有限制吗?</p>
<pre class="brush:php;toolbar:false;"><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></pre></p>
Vue
v-model
Works great for native elements.But it obviously doesn't work with
Your code generation
A very quick solution is to implement
value
binding directly.But you will need to update the component accordingly to use
value
instead ofmodelValue
.renew
The workaround using
v-model:value
only works one way, the same as:value
.