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

Question

我想在运行时更改popover的打开方式(从"悬停"更改为"单击"(。我添加了类似于下面的代码：

<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修饰符作为应该重新创建的元素

密钥特殊属性主要用作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'
}
}

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>