Vuetify attiva un tooltip

Question

Sto usando vuetify e ho una descrizione comando su un pulsante. Non voglio mostrare il suggerimento al passaggio del mouse né al clic, voglio mostrare il suggerimento se viene attivato un evento.

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 (dove creo l'oggetto oggetto e quindi utilizzo router push per trasmetterlo alla pagina di traduzione)

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

Come puoi vedere ho rimosso il v-slot:activator="{ on }"e v-on="on"che ho trovato nell'esempio:https://vuetifyjs.com/fr-FR/components/tooltips/, perché non voglio mostrare la descrizione comando al passaggio del mouse. Ma non funziona come previsto, la descrizione comando non viene visualizzata correttamente. Un po 'di aiuto sarebbe fantastico :)

Answer 1

Per cominciare, stai cercando di cambiare un sostegno nel componente figlio, qualcosa che non dovresti fare:

[Vue warn]: Evita di modificare direttamente un prop poiché il valore verrà sovrascritto ogni volta che il componente genitore viene rieseguito. Utilizza invece un dato o una proprietà calcolata in base al valore dell'elica. Oggetto in fase di modifica: "item.showTooltip"

Quindi inizia creando una variabile di dati separata per showTooltip (non è necessario che sia una proprietà dell'elemento perse) e prova a impostarla su true per vedere cosa succede (e ovviamente v-model="item.showTooltip"passa a v-model="showTooltip"su v-tooltip)