Vue.js + Element UI + El-popover-动态更改触发器不起作用

编程问答 2022-06-09

问题描述

我想在运行时中更改弹出窗口的打开方式（从“悬停”到“点击”）。我添加了类似于以下代码：

<el-popover 
    placement="top-start"
    width="200"
    :trigger="someCondition ? 'hover' : 'click'"
    :title="title"
    :content="content">
    <el-button slot="reference">Button</el-button>
 </el-popover>

标题和内容在运行时成功地动态更改，但是即使条件发生变化，触发器仍保持初始值。

我在做什么错了？

PS-我对vue.js相当陌生（但是对编程和其他Web框架非常有经验-例如React）。

谢谢！

解决方法

在key上使用el-popover修饰符，因为应该重新创建元素

关键特殊属性主要用作Vue的提示 虚拟DOM算法，用于在比较新列表时识别VNode 节点对照旧列表。没有密钥，Vue使用的算法 最小化元素移动并尝试修补/重用元素 尽可能就地使用同一类型。

HTML：

 <el-popover
    :key="trigger"
    placement="top-start"
    title="Title"
    width="200"
    :trigger="trigger"
    content="this is content,this is content,this is content">
    <el-button slot="reference">Hover to activate</el-button>
  </el-popover>
  <el-button @click="changebehavior">Change behavior</el-button>

JS：

data() {
  return {
    visible: false,trigger: 'hover'
  };
},methods: {
  changebehavior() {
    this.trigger = 'hover' == this.trigger
      ? 'click'
      : 'hover'
  }
}
,

使用key修饰符

工作示例 

var Main = {
    data() {
      return {
        visible: false,title: 'Default title',content: 'Default content',trigger: 'click',};
    },methods: {
  changeToClick() {
  this.title= 'Click title';
   this.content= 'Click content will be here';
  this.trigger  = 'click';
  },changeToHover() {
  this.title= 'Hover title';
  this.content= 'Hover content will be here';
  this.trigger  = 'hover';
  },}
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<template>
  
  <el-popover 
   :key="trigger"
    placement="top-start"
    :trigger="trigger"
    width="200"
    :title="title"
    :content="content">
    <el-button slot="reference">Button</el-button>
 </el-popover>
 
 <el-button type="text" @click='changeToClick'>Change To Click</el-button>
  <el-button type="text" @click='changeToHover'>Change To hover</el-button>

</template>
</div>

vue.js