84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
为什么在下面的示例中 v-model 没有绑定到我的输入？ 有限制吗？
{{ header.label }} {{ config.data }}
Vuev-modelWorks great for native elements.
v-model
But it obviously doesn't work with
Your code generation
A very quick solution is to implementvaluebinding directly.
value
:value="item[header.field]" @input="item[header.field] = $event.target.value"
But you will need to update the component accordingly to usevalueinstead ofmodelValue.
modelValue
renew
The workaround usingv-model:valueonly works one way, the same as:value.
v-model:value
:value
const { createApp, ref } = 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' } ] }) const App = { setup() { return { config, test: 1 } } } const app = createApp(App) app.mount('#app')
#app { line-height: 1.75; } [v-cloak] { display: none; }
{{ header.label }} {{ config.data }} v-model test:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vue
v-modelWorks great for native elements.But it obviously doesn't work with
Your code generation
A very quick solution is to implement
valuebinding directly.But you will need to update the component accordingly to use
valueinstead ofmodelValue.renew
The workaround using
v-model:valueonly works one way, the same as:value.