how to use v-model in a complex sence v-model如何绑定一个复杂的 变量场景
What problem does this feature solve?
I have a dynamic variable in v-model , now I don't konw how to use it . please see the follow example I want make a dynamic form and the form with nesting object value 我有个动态表达的场景,需要动态绑定v-model,现在不知道如何设置 v-model的绑定内容,如下代码: 如果使用v-for 绑定的变量是个动态的, 如果是简单的场景 可以直接写出来,但是如果是个复杂场景 需要将路径转化成对象,不知道该怎么写, 而且发现v-model 的内容不能是method 只能是表达式
<script>
const form = ref({
nameInfo: {
firstName: '',
lastName: ''
},
addressInfo: {
province: '',
area: ''
}
})
const formItems = ref([
'info.firstName',
'info.lastName',
'addressInfo.province',
'addressInfo.area'
])
</script>
<template>
<div>
<form>
<!--here if I know the real key I can write directly-->
<input v-model="form.nameInfo.firstName"/>
<input v-model="form.nameInfo.lastName"/>
<!--
here I use v-for the item is a variable and
it not a directly variable it's a path for a object
when i write as this it will bind form['info.firstName'] not the value form.info.firstName I want
and here v-model can not use methods when i wan't v-model="calModel(item)" with a method
-->
<input v-for="item in formItems" v-model="form[item]">
</form>
</div>
</template>
I konw how to get the path object value but in v-model I really don't konw how to set it
What does the proposed API look like?
tell me how can v-model="form[prop]" prop is a variable string prop='info.firstName' transfer to v-model="form.info.firstName" 希望能知道 怎么绑定 类似 v-model=form[prop] prop是个字符串变量, prop="info.firstName" 能够转化成v-model="form.info.firstName"