Subscribe on changes!

how to use v-model in a complex sence v-model如何绑定一个复杂的 变量场景

avatar
Sep 4th 2021

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"

avatar
Sep 4th 2021

Issues are for bug reports and feature requests only.