vue项目中click事件不执行——v-for中的key

一、现象

      今天被一个神奇的bug困扰了一天。

      在vue项目中，页面有一个input在获得焦点的状态下（失去焦点时会触发事件和数据变化），此时单击一个绑定click事件的元素，click事件不执行，只有在input失去焦点后，第二次单击时，才会执行click事件。

二、代码

      绑定click事件的元素代码简化如下：

<p v-for="(element,index) in levelFields" @click="changeLayerFn(index)" :key="Math.random()">
    <b>{{element.aliasName}}</b>
</p>

三、解决过程及原因分析

      由于项目中代码复杂度很高，经过层层注释和简化，最终发现，当注释掉上面代码中的“:key”时，click事件可以正常执行了。究其原因，第一次点击时，首先触发了input的blur方法，导致数据发生了变化。

      我们来看一下官方对key的解释

      由于被点击元素的key值是随机数，当数据变化时，key值变了，所以元素被重新渲染了。原来接受click的元素已经不存在了，所以click事情也没有执行了。

      最后把key的值设置为index，问题就解决了，不知道当初为啥要用random了?