Vuetify löst einen Tooltip aus

Question

Ich verwende vuetify und habe einen Tooltip über eine Schaltfläche. Ich möchte den Tooltip weder beim Hover noch beim Klicken anzeigen. Ich möchte den Tooltip anzeigen, wenn ein Ereignis ausgelöst wird.

translate.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>

itemSelect.vue (wo ich ein Objektelement erstelle und es dann mit dem Router-Push an die Übersetzungsseite übertrage)

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

Wie Sie sehen können, habe ich das entfernt v-slot:activator="{ on }"und das v-on="on", was ich auf dem Beispiel gefunden habe:https://vuetifyjs.com/fr-FR/components/tooltips/, weil ich den Tooltip beim Hover nicht anzeigen möchte. Aber es funktioniert nicht wie erwartet, der Tooltip wird nicht richtig angezeigt. Etwas Hilfe wäre toll :)

Answer 1

Für den Anfang versuchen Sie, eine Requisite in der untergeordneten Komponente zu ändern, was Sie nicht tun sollten:

[Vue warn]: Vermeiden Sie es, eine Requisite direkt zu mutieren, da der Wert bei jedem erneuten Rendern der übergeordneten Komponente überschrieben wird. Verwenden Sie stattdessen Daten oder berechnete Eigenschaften, die auf dem Wert der Requisite basieren. Prop wird mutiert: "item.showTooltip"

Beginnen Sie also damit, eine separate Datenvariable für showTooltip zu erstellen (muss keine Eigenschaft von item perse sein) und setzen Sie sie auf true, um zu sehen, was passiert (und wechseln Sie natürlich v-model="item.showTooltip"zu v-model="showTooltip"v-tooltip).