关于elementui 组件Popover删除弹出框点击取消无法关闭弹出框的解决办法

问题如图

今天写前端页面时使用elementui 组件时发现点击取消按钮，弹出框不关闭。
官方代码如下

<el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>这是一段内容这是一段内容确定删除吗？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
  </div>
  <el-button slot="reference">删除</el-button>
</el-popover>

<script>
  export default {
    data() {
      return {
        visible: false,
      };
    }
  }

解决办法

在标签上面加ref属性 在取消按钮绑定点击事件：

method 内添加方法

移除之前的 v-model=“visible” 属性，然后刷新页面，点击取消按钮成功关闭