vue.js - 如何将点击事件传递给另一个按钮并触发弹出窗口

Question

我正在使用这个组件https://element.eleme.io/#/en-US/component/popover

我需要正确地将点击事件从一个按钮传递到另一个按钮并在转发按钮下显示弹出窗口

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.8.2/lib/index.js"></script>
<div id="app">
<template>
   <el-button @click="$refs.forward.click()">Click to forward</el-button>
  <el-popover
    placement="bottom"
    title="Title"
    width="200"
    trigger="click"
    content="this is content, this is content, this is content">
    <el-button ref="forward" slot="reference">Click to activate</el-button>
  </el-popover>

</template>
</div>

我已经通过点击事件，$refs.forward.click()但这不会触发弹出窗口。我错过了什么吗？

https://codepen.io/anon/pen/dEdENJ

标签： vue.jsvue-componentnuxt.js

Answer 1

你在这里想太多了：

将新属性添加到data被调用visible

visible: false

然后改变它click to forward

@click="visible = !visible"

最后，将其分配给v-model弹出框的 ：

v-model="visible"

完毕。