Vue.js + 元素 UI + el-popover - 动态更改触发器不起作用

Question

我想在运行时更改弹出窗口的打开方式（从 'hover' 到 'click'）。我添加了类似于以下的代码：

<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）。

谢谢！

Answer 1

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

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

使用 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 + 元素 UI + el-popover - 动态更改触发器不起作用

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

vue.js

element-ui