Vuetify déclenche une info-bulle

Question

J'utilise vuetify et j'ai une info-bulle sur un bouton. Je ne veux pas afficher l'info-bulle au survol ni au clic, je veux afficher l'info-bulle si un événement est déclenché.

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 (où je crée un objet objet, puis j'utilise le routeur push pour le transmettre à la page de traduction)

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

Comme vous pouvez le voir j'ai supprimé le v-slot:activator="{ on }"et v-on="on"que j'ai trouvé sur l'exemple:https://vuetifyjs.com/fr-FR/components/tooltips/, car je ne veux pas afficher l'info-bulle au survol. Mais cela ne fonctionne pas comme prévu, l'info-bulle ne s'affiche pas correctement. Un peu d'aide serait génial :)

Answer 1

Pour commencer, vous essayez de changer un accessoire dans le composant enfant, ce que vous ne devriez pas faire:

[Vue warn]: évitez de muter directement un accessoire car la valeur sera écrasée chaque fois que le composant parent sera à nouveau rendu. À la place, utilisez une donnée ou une propriété calculée en fonction de la valeur de l'accessoire. Prop en cours de mutation: "item.showTooltip"

Commencez donc par créer une variable de données distincte pour showTooltip (n'a pas besoin d'être une propriété de item perse) et essayez de la définir sur true pour voir ce qui se passe (et bien sûr, passez v-model="item.showTooltip"à v-model="showTooltip"sur v-tooltip)