Element: Unable to dynamically assign Popover target

[xmas]

ElementUI version

OS/Browers version

Vue version

Reproduction Link

http://jsfiddle.net/yoqda8fn/4/

Steps to reproduce

Popovers require that the popover have a ref and that the targeted element have a v-popover directive.

For the ref I expect to use:
:ref="activeIndex"

For the directive I expect to use:
v-popover="'pop'+index"

What is Expected?

What is actually happening?

I get an error:

Uncaught TypeError: Cannot read property '$refs' of undefined

[Leopoldthecoder]

Vue natively does not support binding ref to a variable. It has to be a string literal.

[xmas]

Is there another way to dynamically re-use a popover?

[abensur]

@xmas
You can do this by abstracting your popover in another component

<template>
  <div class="dynamic-popover">
    <el-popover
      ref="dynamic"
      placement="bottom"
      width="400"
      trigger="click">
      <ul>
        <li v-for="(tip, index) in tips" key="index">
          {{ tip }}
        </li>
      </ul>
    </el-popover>
    <el-button v-popover:dynamic>tips</el-button>
  </div>
</template>
<script>
export default {
  name: 'dynamic',
  props: {
    tips: {
      type: Array,
      required: true
    }
  }
}
</script>

[lukaszkups]

in my case inserting popover inside button html helped e.g.:

<el-button v-popover:dynamic>
    <el-popover ref='dynamic' ... ></el-popover>
</el-button>

[visualjerk]

Had the same issue. In my case the error occurred when placing the popover after the button.

This gives an error:

<el-button v-popover:foo></el-button>
<el-popover ref="foo" ... ></el-popover>

This works as expected:

<el-popover ref="foo" ... ></el-popover>
<el-button v-popover:foo></el-button>

Maybe this needs some clarification in the documentation.

[kamlekar]

@visualjerk Thanks. Anyway to have that foo value from a variable? I have a for loop.