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

[Hawkeye64]

I am getting this error in the QTooltip in a QTr/QTd:

found in

---> <QTooltip>
       <QTd>
         <QTr>
           <QTable>
             <LiveViewTable> at src/components/LiveViewTable.vue
               <Archive> at src/pages/Archive.vue
                 <QPageContainer>
                   <QLayout>
                     <LayoutDefault> at src/layouts/default.vue
                       <App> at src/App.vue
                         <Root>

Last line is the offending code:

  mounted () {
    this.$nextTick(() => {
      /*
        The following is intentional.
        Fixes a bug in Chrome regarding offsetHeight by requiring browser
        to calculate this before removing from DOM and using it for first time.
      */
      this.$el.offsetHeight // eslint-disable-line

      this.anchorEl = this.$el.parentNode
      this.anchorEl.removeChild(this.$el)

My HTML:

          <q-td key="message" :props="props">
            <q-tooltip v-if="props && canShowPopover(props.row)" anchor="top middle" self="bottom middle">{{ getMessagePopover(props.row) }}</q-tooltip>
            {{ getMessage(props.row) }}
          </q-td>

And the functions:

    getMessage: function (row) {
      if (row.message.length > this.truncateLength) {
        return row.message.substring(0, this.truncateLength) + '...'
      }
      return row.message
    },

    canShowPopover: function (row) {
      if (row && row.message) {
        return row.message.length > this.truncateLength
      }
      return false
    },

    getMessagePopover: function (row) {
      return row.message
    },

Has anyone else seen this? Is this a legitimate bug?
@rstoenescu

Maybe the code should read like this:

this.anchorEl = this.$el.parentNode
if (this.anchorEl) {
      this.anchorEl.removeChild(this.$el)
}

I should mention this works fine on existing data. It’s when data is dynamically added to the row.

[s.molinari]

It’s not exactly like your code, but it seems to work without errors.

https://jsfiddle.net/smolinari/6x9puefn/

Scott

[Hawkeye64]

I forked your sample to be more like what I am doing and not seeing the error in colsole either:

https://jsfiddle.net/Hawkeye64/am7fj436/2/

But, for the life of me, I can’t figure out why this.anchorEl ends up being null.

[Hawkeye64]

Maybe jsfiddle doesn’t show the console error because it’s hosted in an iframe?

[Hawkeye64]

I changed it to a v-show (instead of the v-if) and I no longer get the issue. Still would like to know why.

[s.molinari]

Yeah. Sounds strange.

Scott