Vuetify memicu tooltip

Question

Saya menggunakan vuetify, dan saya memiliki tooltip di atas tombol. Saya tidak ingin menampilkan keterangan alat saat mengarahkan atau mengklik, saya ingin menampilkan keterangan alat jika beberapa peristiwa dipicu.

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 (di mana saya membuat item objek dan kemudian menggunakan push router untuk mengirimkannya ke halaman terjemahan)

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

Seperti yang Anda lihat, saya menghapus v-slot:activator="{ on }"dan v-on="on"yang saya temukan di contoh:https://vuetifyjs.com/fr-FR/components/tooltips/, karena saya tidak ingin menampilkan tooltip saat mengarahkan kursor. Namun tidak berfungsi seperti yang diharapkan, tooltip tidak ditampilkan dengan benar. Beberapa bantuan akan sangat bagus :)

Answer 1

Sebagai permulaan, Anda mencoba mengubah prop di komponen anak, sesuatu yang tidak boleh Anda lakukan:

[Vue warn]: Hindari mutasi prop secara langsung karena nilainya akan ditimpa setiap kali komponen induk dirender ulang. Sebagai gantinya, gunakan data atau properti yang dihitung berdasarkan nilai prop. Prop sedang dimutasi: "item.showTooltip"

Jadi mulailah dengan membuat variabel data terpisah untuk showTooltip (tidak perlu menjadi properti item perse) dan coba setel ke true untuk melihat apa yang terjadi (dan tentu saja ubah v-model="item.showTooltip"menjadi v-model="showTooltip"di v-tooltip)