Vue v-model 动态绑定

最近在写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" />
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 支持三元运算符动态绑定 for循环动态绑定
    马小帅mm阅读 16,453评论 1 1
  • 目标:1、了解v-model的本质。2、了解v-model的实现原理。 我们知道Vue的核心特性之一是双向绑定,v...
    LoveBugs_King阅读 222,557评论 3 38
  • 抛出问题 我们先来看一下下面这段代码 上述代码很简单,就不做过多的解释了。如果这段代码都看不懂,那下面也没必要再看...
    var_Change阅读 6,718评论 0 2
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,653评论 0 6
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 8,653评论 0 3