在 vue 项目中，v-for 的时候使用 v-model 快捷绑定变量

Posted 2020-10-25 自然的呼吸

在v-for的时候语义化使用v-model是一件很头疼的事情，今天无意间发现了一个小窍门可以稍微的好用点。

先来说说我之前是怎么在v-for的时候使用v-model的。

<template>
  <div id="vModel">
    <div v-for="(list, i) in dataList" :key="i">
      <span>{{item.title}}</span>
      <input type="text" v-model="bindData[i]">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [
          {
            title: ‘姓名‘
          },
          {
            title: ‘年龄‘
          },
          {
            title: ‘爱好‘
          }
        ],
        bindData: [‘‘, ‘‘, ‘‘]
      }
    }
  }
</script>

就是通过设置一个数组来达到绑定每个input框中的内容，但是这样有一个非常大的弊端，就是在提取内容的时候需要在看看数组中的每一项对应的是什么内容。

假如一个表单中需要填充一段指定的数据，比如有这样一段数据需要填充进去：

        peopleInfo: {
          name: ‘mr.zhang‘,
          age: ‘10‘,
          like: ‘coding‘
        }

这个时候就需要找到绑定的数据中的每一项，然后对应起要填充的数据的每一项进行赋值：

      handleData() {
        this.bindData[0] = this.peopleInfo.name;
        this.bindData[1] = this.peopleInfo.age;
        this.bindData[2] = this.peopleInfo.like;
      }

在数据量稍微庞大一些的时候就会带来极大的代码成本以及维护难度，我们期望直接赋值就可以达到效果，只需要一个小的转变就可以，先改变绑定数据的结构：

        bindData: [{
          name: ‘‘,
          age: ‘‘,
          like: ‘‘
        }],

然后在实例中添加一个数组：

        str: [‘name‘, ‘age‘, ‘like‘],

在改变html中绑定的书写方式：

      <input type="text" v-model="bindData[0][str[i]]">

这样就可以直接赋值绑定：

        this.bindData[0] = this.peopleInfo;

完整的代码：

<template>
  <div id="vModel">
    <div v-for="(list, i) in dataList" :key="i">
      <span>{{item.title}}</span>
      
      <input type="text" v-model="bindData[0][str[i]]">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [
          {
            title: ‘姓名‘
          },
          {
            title: ‘年龄‘
          },
          {
            title: ‘爱好‘
          }
        ],

        bindData: [{
          name: ‘‘,
          age: ‘‘,
          like: ‘‘
        }],

        str: [‘name‘, ‘age‘, ‘like‘],

        peopleInfo: {
          name: ‘mr.zhang‘,
          age: ‘10‘,
          like: ‘coding‘
        }
      }
    },

    methods: {
      handleData() {
        this.bindData[0] = this.peopleInfo;
      }
    }
  }
</script>

如果有更好的方式希望各位不吝指导！