Element: [Feature Request] Dynamic popovers

[Fleeck]

Existing Component

Yes

Component Name

Popover

Description

I can't add multiple popovers dynamically because of v-popover:popover1 directive. I want to create popovers via v-for and add them ids, but I can't because element name doesn't interpolate.

[AkatQuas]

i want that too, desperately at the moment!

[AkatQuas]

hey bro, i just made it!!!!
well i have to say this trick is not a perfect one because i rewrite the directive and el-popover component.
In my case, i import the whole bundle from element-ui, so I change something in the file element-ui.common.js in node_modules/element-ui/lib.

the following is the change

in line 15422, change the hook function from mounted to updated,

in line 15561, change the hook function from bind to update, AND , replace the line 15562 to a new statement:
vnode.context.$refs[binding.value].$refs.reference = el;

now you can use the el-popover and v-popover in a dynamic way, here is my case:

         <el-button size="small" type="danger" v-popover="'pop'+id" >delete</el-button>
                <el-popover
                        :key="id"
                        :ref="'pop'+id"
                        placement="top"
                        width="160"
                        trigger="hover"
                        >
                    <p>Delete anyway？</p>
                    <div style="text-align: right;">
                        <el-button type="primary" size="mini" @click="handleDelete">Sure</el-button>
                    </div>
                </el-popover>

[Fleeck]

@AkatQuas thanks for your reply, however I've found a better solution. I am just using slot=reference for this and it works perfectly well. Here is a snippet:

  <el-popover
        :ref="'popover' + index">
        <span slot="reference" class="enter-text" @click="currentText = answers[index]"> // ref slot
          {{ answers[index] || 'Enter text' }}
        </span>
        <template> // default slot
          <el-input
            type="textarea"
            placeholder="Type your answer here..."
            v-model="currentText"
            :autosize="{ minRows: 5 }"/>
          <el-button type="primary" @click="updateText(index)">Done</el-button>
        </template>
      </el-popover>