Javascript Vuetify触发工具提示

我正在使用vuetify，在按钮上有一个工具提示。 我不想在悬停或单击时显示工具提示，我想在触发某个事件时显示工具提示

翻译.vue

<v-tooltip v-model="item.showTooltip" top>
  <template v-slot:activator="{}">
    <v-btn @click="translateItem(item)"> Call API to translate</v-btn>
  </template>
  <span>API quota limit has been reached</span>
</v-tooltip>


<script>
export default(){
  props: {
    item: { default: Objet}
  }
 methods: {
   translateItem: function (item) {
     axios
       .post(baseURL + "/translateAPI", {
         text: item.originTrad;
       })
       .then((res) => {
          if (apiQuotaLimitReached(res) { 
            // If limit is reached I want to show the tooltip for some time
            item.showTooltip = true;
            setTimeout(() => {item.showTooltip = false;}, 3000);
            } else  { ..... }}}
</script>

调用API进行翻译
已达到API配额限制
导出默认值（）{
道具：{
项目：{default:Objet}
}
方法：{
translateItem：功能（项）{
axios
.post（baseURL+“/translateAPI”{
文本：item.originTrad；
})
。然后（（res）=>{
如果（apiQuotaLimitReached）（res）{
//如果达到限制，我想显示一段时间的工具提示
item.showTooltip=true；
setTimeout（（）=>{item.showTooltip=false；}，3000）；
}else{…}}

itemSelect.vue（其中我创建了对象项，然后使用路由器推送将其传输到翻译页面）

导出默认值（）{
方法：{
createItem:函数（）{
item.originTrad=“要翻译的文本”
....
item.showTooltip=false；
这是$router.push({
名称：“翻译”，
参数：{
“项目”：项目，
},
});  }}

正如您所见，我删除了在示例中找到的

v-slot:activator=“{on}”

和

v-on=“on”

，因为我不想在悬停时显示工具提示。但它没有按预期工作，工具提示没有正确显示。

---

一些帮助将非常有用：）

对于初学者，您正在尝试更改子组件中的道具，这是您不应该做的：

[Vue warn]：避免直接变异道具，因为该值将 每当父组件重新呈现时覆盖。请改用 基于道具值的数据或计算属性。道具为 变异：“物品.展示工具提示”

---

因此，首先为showTooltip创建一个单独的数据变量（不需要是item perse的属性），并尝试将其设置为true以查看发生了什么（当然，还可以将v-model=“item.showTooltip”更改为v-tooltip上的v-model=“showTooltip”）

您是否尝试过使用Vue.set（item，'showTooltip'，true）不是直接分配到属性？谢谢，这很有效，但不能解决所有问题，我没有告诉你简化我的问题，但我在这个v-工具提示上有一个v-for，所以我有几个按钮“translate”，每个按钮对应一个要翻译的项。所以它有效，但它会在每个按钮上显示工具提示，（我想在单击的唯一一个上显示工具提示）也许我需要创建一个自定义组件，在我需要在此组件上执行v-for之后，我应该为每个项目都显示一个“showTooltip”，它可能会解决我的问题

<script>
export default(){
 methods: {
   createItem: function () {
     item.originTrad = "the text to translate"
     ....
     item.showTooltip = false;
     this.$router.push({
       name: "translate",
       params: {
            "item": item,
       },
     });  }}
</script>