vue中使用v-for遍历v-model

        相信大家在平时对项目的开发中，对v-for的使用并不陌生，像我平时用的最多的就是对下拉列表的遍历，用法如下：

<el-select v-model="temp.destinationPortType" filterable placeholder="请选择">
  <el-option
    v-for="item in selectList"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
  </el-option>
</el-select>

        从以上例子可以看出，我们遍历了key,label,value，在需要遍历的前面都有加上冒号“：”，所以在v-model的遍历中，需要注意的是，v-model前面不需要加冒号“：”。

        如下例子是对表格的遍历，因为表格中存在checkbox复选框和input文本框，表格中对表单操作需要保存对应的值，所以v-model也要一起遍历，遍历方法如下：

<tbody>
  <tr v-for="(item, index) in regList.requiredItems" :key="index">
    <td> {{ item.showName }} </td>
    <td><el-checkbox v-model="item.optional" disabled></el-checkbox></td>
    <td><el-input v-model="item.regDesc">{{ item.regDesc }}</el-input></td>
  </tr>
</tbody>

        按照平时开发喜欢，页面中的每一个v-model都会在页面data中有一个对应的变量。那么遍历的v-model要怎样对应到data中进行表单提交呢？

        其实只要在data中声明一个变量，表单修改后，数据会自动更新到变量中去。具体如下图所示：