[Solved] v0.17.9 : QTooltip issue with v-for after update of the store with Vuex

[Sweetyy]

Hi everyone,

First I was using the QTooltip inside a button which contained a value coming from the store. It was working perfectly like so :

<q-btn>
  <q-tooltip anchor="bottom middle" self="top middle" >
    {{ user.firstName }} {{ user.lastName }}
  </q-tooltip>
</q-btn>

But now i want to use it the same way but the value in the QTooltip is coming from a v-for like that :

<q-btn>
  <q-tooltip anchor="bottom middle" self="top middle" v-for="user in form.users" v-bind:key="user.id" v-if="user.isAdmin === true">
    {{ user.firstName }} {{ user.lastName }}
  </q-tooltip>
</q-btn>

And now i get 2 errors after I change the value and push it in the store :

*[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'removeChild' of null"

found in

---> <QTooltip>
       <QBtn>
         <Forms> at src\pages\Forms.vue
           <QPageContainer>
             <QLayout>
               <Index> at src\layouts\Index.vue
                 <App> at src\App.vue
                   <Root>"
*TypeError: Cannot read property 'removeChild' of null
    at VueComponent.eval (QTooltip.js?7ff9:121)
    at Array.eval (vue.runtime.esm.js?2b0e:1833)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1754)

Because of that error, the QTooltip is not showing anymore because it looks like the value is not set in the component but it’s correctly pushed and update in the store ( i tested it). If i refresh the page, the QTooltip is working well till i change the value again.

Is there any fix i can do on my side ?

Thanks in advance

Sweetyy

[genyded]

How/where are you updating the store? And when you say " till i change the value again", what value do you mean - the user.isAdmin? We can probably help get it working once we have the complete picture. One thing I would also suggest in the meantime is putting your v-if on a template element that wraps your tool-tip like this (it makes for a bit cleaner code and separation of concerns):

<q-btn>
  <template  v-if="user.isAdmin === true">
    <q-tooltip anchor="bottom middle" self="top middle" v-for="user in form.users" v-bind:key="user.id">
      {{ user.firstName }} {{ user.lastName }}
    </q-tooltip>
  </template>
</q-btn>

[Sweetyy]

Hello @genyded

Thank you for your answer ! The problem with your solution is that the user in the v-if is define in the v-for under.
But thanks to you i found the fix ! I just had to move the v-for and the v-if in the <q-btn> like that :

<q-btn v-for="user in form.users" v-bind:key="user.id" v-if="user.isAdmin === true">
  <q-tooltip anchor="bottom middle" self="top middle">
    {{ user.firstName }} {{ user.lastName }}
  </q-tooltip>
</q-btn>

It looks like the condition on the QTooltip prevented the value (and reactivity) after an update (with a push) in the store.

Thank you again for your suggestion !

[genyded]

Cool - glad you got it working!