Why isn’t v-model binding to my input in the example below? Is there a limitation of <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' } }
],
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>