在单击时更改Bootstrap-vue工具提示的文本

Question

我要在单击按钮时更改Vue工具提示文本吗？

• 点击前的工具提示文本：复制文本
• 点击后的工具提示文本：复制的文本

当再次悬停时，它应该再次显示“复制文本”，直到我再次单击以更改工具提示文本为止。

<b-button variant="primary" id="copy">
   click here
</b-button>
<b-tooltip target="copy">
   copy text
</b-tooltip>

注意：我在此工具提示中使用了Bootstrap-Vue。

Answer 1

添加一个名为``tooltipText`''的数据属性并更新该属性，单击该按钮然后在鼠标离开时将其重置：

data(){
  return{
   tooltipText:'Copy text'
   }
}

模板：

<b-button variant="primary" id="copy" @click="tooltipText='Text copied'" @mouseout="tooltipText='Copy text'">
   click here
</b-button>
<b-tooltip target="copy">
 {{tooltipText}}
</b-tooltip>