Vue.js + Element UI + el-popover - dynamically changing trigger doesn't work

Question

I want to change in runtime how my popover is opening (from 'hover' to 'click'). I added code similar to the below:

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

The title and content successfully changes dynamically in runtime but the trigger stays with the initial value even if the condition changes.

What am I doing wrong?

PS - I am pretty new with vue.js (but very experienced with programming and other web frameworks - e.g. React).

Thanks!

Answer 1

Use the key modifier on the el-popover as the element should be recreated

The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible.

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'
  }
}

Answer 2

Using key modifier

Working example

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/[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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>