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



  • 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.



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

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

    Scott



  • 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.



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



  • 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. 😞



  • Yeah. Sounds strange.

    Scott