vue绑定key的案例（输入框失焦问题）

之前做过这样的一个需求，就是输入框可动态增加或者减少的场景。通过v-for来遍历所有输入框，那么分析下面key几种情况：

为了演示，这里假设输入框的校验规则是允许字符数为1-5。

1.没有绑定key 或者 key绑定index的情况
如图所示，第二个输入框输入了6个字符，校验不通过，但是第三个输入框校验是通过的，但是当我们删除第二个输入框的时候，第三个输入框变为第二个输入框，本来校验通过的，现在反而不通过了。

分析：当dom发生变化的时候，vue进行dom进行的增删，借助vnode的key比较，第二个输入框绑定的key为2，第三个输入绑定的输入框为3，那么将第二个输入框删除后，第三个输入框变为第二个输入框，这时候vue删除key为3的节点，key为2的节点依旧存在，替换的仅仅是输入框的值，那么就会出现上面这种情况。

2.key绑定唯一值的情况
通过下面这个函数生成唯一值：

  uuid (index) {
     	 return `uuid-${index}-${Date.now()}-${Math.random().toFixed(2)}`;
  }

为了解决第一种情况出现，我们尝试将key绑定唯一值，但是出现另外一个bug。

如图所示，第一种情况的问题在这里确实能得到解决，但是每当我在输入框输入的时候，一输入一个字符就会出现失去焦点。
分析：每当值发生变化，vue就会重新渲染。因为我的key值是通过时间戳和随机数来生成，所以重新渲染的时候，节点的key肯定和上一次不一样，那么vue会将所有节点全部替换，所以出现失焦的情况。

3.key仍旧绑定唯一值的情况
将绑定的唯一key存起来，当输入后，重新渲染的时候，用上次的key，而不是重新新的key，这样就能解决第2种情况出现的问题

分析：如下面代码展示，将唯一key存进keyList里面，然后下次渲染仍旧用上次的key

    <el-form :model="form">
        <el-form-item class="main-container" v-for="(item, index) in form.list" :key="keyList[index]"
                      :prop="'list.' + index + '.value'"
                      :rules="{
                        validator: validateName, trigger: 'blur'
                       }">
            <el-input class="main-input" v-model="item.value"></el-input>
            <el-button v-if="index === form.list.length -1" @click="add(index)">+</el-button>
            <el-button v-if="form.list.length > 1" @click="sub(index)">-</el-button>
      </el-form-item>
    </el-form>

add和sub函数在增删输入框的同时，也对keyList进行增删

data () {
    var validateName = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('输入不能为空'));
        } else {
            if (value.length > 5) {
                callback(new Error('输入项不能超过5个字符'));
            }
        }
      };
      return {
          form: {
            list: [
                {
                    value: ''
                }
            ]
          },
          keyList: [this.uuid(0)],
          validateName
      }
  },
  methods: {
      add (index) {
          this.keyList.push(this.uuid(index));
          this.form.list.push({value: ''})
      },
      sub (index) {
          this.keyList.splice(index, 1);
          this.form.list.splice(index, 1);
      },
      uuid (index) {
          return `uuid-${index}-${Date.now()}-${Math.random().toFixed(2)}`;
      }
  }

完整代码地址：https://github.com/suhuashan/vue-blog
如果对您有帮助，请star下~