element-ui中的el-popover结合vue中的v-for的使用方法

一个使用v-for循环渲染的列表，要求鼠标hover的时候显示其详细的介绍，我将需求简化，看下面代码效果图：鼠标hover到哪一个色块的时候，tips显示其具体的色块代码，给el-popover绑定ref属性，必须是唯一的，通过element-ui组件自带的showPopper属性来控制tips的显隐

    <template v-for="(item, index) in datacolor">
      <el-popover
      placement="top"
      width="160"
      :content="item.color"
      :ref="'elpopoverRef'+index">
        <div
          slot="reference"
          :key="index"
          class="item"
          :style="{ background: `${item.color}` }"
          @mouseover="changeHoverEle(item, index)"
          @mouseleave="changeHoverLeave(item,index)"
        ></div>
      </el-popover>
    </template>

js部分代码

mounted(){
  for (let i = 0; i < 100; i++) {
    this.datacolor.push({
      id:i,
      color:`#${Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,"0")}`
    })
  }
}

methods(){
  changeHoverEle(item, index){
    //showPopper是element-ui组件内部自带的属性
    this.$refs[`elpopoverRef${index}`][0].showPopper = true
  },
  changeHoverLeave(item, index){
    this.$refs[`elpopoverRef${index}`][0].showPopper = false
  },
}