动态v-model

引题： 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和绑定的值不一样那么用这种方法也可以更加简洁代码