最近在写vue页面的时候发生了一个操作：
用v-for生成了多个input，然后他把input的数据用v-model双向绑定到了data里面的一个对象。
data数据格式

data() {
    return {
        modelvalue: {
            page: {
                patientName: ' '
            },
            page1: {
                patientName1: ' '
            },
            page2: {
                patientName2: ' '
            }
        },
        ness: {
            page: {
                patientSex: {
                    label: '姓名',
                    placeholder: '请输入用姓名',
                    required: true,
                    type: 'input',
                    input_type: 'text',
                    name: 'patientName'
                }
            },
            page1: {
                patientSex: {
                    label: '姓名',
                    placeholder: '请输入用姓名',
                    required: true,
                    type: 'input',
                    input_type: 'text',
                    name: 'patientName'
                }
            }
            page2: {
                patientSex: {
                    label: '姓名',
                    placeholder: '请输入用姓名',
                    required: true,
                    type: 'input',
                    input_type: 'text',
                    name: 'patientName'
                }
            }
        }
    }
}

html 结构

<div v-for="(value, key, index) in akn.ness" :key="key" class="page" v-show="index == num">
    <van-cell-group>
        <div v-for="(item, key2) in value" :key="key2" class="van-cell-boder">
            <van-field v-if="item.type == 'input'" v-model="modelvalue[key][item.name]" required :label="item.label" :type="item.input_type" :placeholder="item.placeholder" />
        </div>
    </van-cell-group>
</div>

ness 的name写成 name: 'modelvalue . page .patientName'
html v-model="item.name"
item.name是字符串
渲染在页面 v-model=" 'modelvalue . page .patientName' "
这样是不可以的。。。

v-model实现机制

我们先简单说下v-model的机制：v-model会把它关联的响应式数据，动态地绑定到表单元素的value属性上，然后监听表单元素的input事件：当v-model绑定的响应数据发生变化时，表单元素的value值也会同步变化；当表单元素接受用户的输入时，input事件会触发，input的回调逻辑会把表单元素value最新值同步赋值给v-model绑定的响应式数据。

<input v-model="sth" />
//  等同于
<input :value="sth" @input="sth = $event.target.value" />