引题： vue如何绑定动态的v-model

每日励志话语: 每天进一步一点点，这不就是希望。

如果错误还望指出,大家一起加油，明天你就是最耀眼的一个。

如果内容对你有帮助还望可以帮我点个

三连


如题

笔者在工作上遇到这样一个场景在一些的表单中如果出现很多字段，那么使用循环的方式去处理会比较简洁，那么在这一过程中就出现了一个问题

如何动态绑定表单的值

，这里以

Element UI的form表单为例


假设目前需要：

10个输入框的表单


如果一个去写代码后续改起来可能相当麻烦

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称1">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称2">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称3">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称4">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称5">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称6">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称7">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称8">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动名称9">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

就需要这么一大串，如果我们通过把

输入框抽象成数组

就会这么干

首先元素肯定是循环没跑

这时候就导致我们对

输入框的修改都在这个数组里


inputColumns: [
        {
          label: '活动名称',
          prop: 'name'
        },
        {
          label: '活动名称1',
          prop: 'name1'
        },
        {
          label: '活动名称2',
          prop: 'name2'
        },
        {
          label: '活动名称3',
          prop: 'name3'
        },
        {
          label: '活动名称4',
          prop: 'name4'
        },
        {
          label: '活动名称5',
          prop: 'name5'
        },
        {
          label: '活动名称6',
          prop: 'name6'
        },
        {
          label: '活动名称7',
          prop: 'name7'
        },
        {
          label: '活动名称8',
          prop: 'name8'
        },
        {
          label: '活动名称9',
          prop: 'name9'
        }
      ]

这里肯会有人说这不也是要写一大串吗？

这样有什么屁用？

先别急嘛!!既然会有这样的需求就会有

应用场景


让我们看一下v-model的代码

 <el-input v-model="item.prop"></el-input> 

第一个

props

值为

name

那么这里等于

v-model="name"


但是这样绑定

v-model

就会出现一个问题

在代码中我们

v-model的值是动态的

,即此时我们希望绑定的应该

v-model='name'

，绑定这个字段，但是目前的结果是绑定了

prop

这个字段

问题来了,如何绑定到我们想要的字段上

首先分析一下目前我们得到的结果是

循环后的结果如下

v-model="prop"


我们希望的是

v-model="[prop]"

这里[]指的是我们想要拿到prop的值

此时我就会想到

es6

的语法通过

[]

来获取值，那我们来试一下

<el-form-item v-for="(item, index) in inputColumns" :label="inputColumns[index].label" :key="index" >
     <el-input v-model="item[item.prop]"></el-input>
</el-form-item>

可以看出此时我们已经成功绑定了，但是我们目前v-model的值为

item[item.prop]

此时绑定的是item上，以

elementUi

为例，elementUi是需要绑定

某个对象下


例如

    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>

那我们只需要把

item[item.prop]

这里的item换成

form[item.prop]


此时就大功告成

应用场景

1.假设目前有个表单：

输入的值要根据后端返回的字段决定时，这种方法就很有用


2.表单控件的复用：

如果有两个表单都是input只是label和绑定的值不一样那么用这种方法也可以更加简洁代码


此时就大功告成

[外链图片转存中…(img-kvutSLWi-1633572731451)]

应用场景

1.假设目前有个表单：

输入的值要根据后端返回的字段决定时，这种方法就很有用


2.表单控件的复用：

如果有两个表单都是input只是label和绑定的值不一样那么用这种方法也可以更加简洁代码