N
N
Nikita Kit2018-06-13 12:32:30
Vue.js
Nikita Kit, 2018-06-13 12:32:30

Why is table header array update not reactive?

Given:
A table with recursively nested tables, in which the data is updated when the parameters are updated (the table header is updated accordingly, along with the data). The table is a child element and receives data about the header through props. the table header is an array of objects, with keys key, value and description:

<thead v-if='mutableHeaders.length' slot='header' class='table__head' :class="{'table__head--shadowed': headerShadowed}">
        <tr class='table__row'>
          <th class='table__cell' v-for='(header, idx) in mutableHeaders' v-tooltip.top='{content: header.description}' :data-key='header.key' :key='idx'>
            <span class='table__th-inner'>{{header.value}}</span>
            <div v-if='header.description' class='table__cell-desc'>
              <svg><use xlink:href='/dist/images/sprite/sprite.svg#icons--quest-circle'></use></svg>
            </div>
          </th>
        </tr>
      </thead>

Problem:
when updating data, the body of the table is updated correctly, but the header remains the same, despite the fact that in the vue devtools (virtual home) the headers array is updated correctly.
Attempts:
I decided to move all the data from props headers to data.mutableHeaders (that's why in the markup mutableHeaders instead of headers) and reset mutableHeaders when updating props headers (don't criticize the syntax, I love coffee):
watch:
      headers:
        deep: true,
        handler: (newValue) ->
          @mutableHeaders.splice(0, @mutableHeaders.length)
          @$set @, 'mutableHeaders', newValue
    mounted: ->
      @mutableHeaders.splice(0, @mutableHeaders.length)
      Vue.set @, 'mutableHeaders', @headers

It seems that set should give reactivity to the data, but no, it did not work, even with the preliminary splicing of the array. Vue.set doesn't help either.
Also tried this:
watch:
      headers:
        deep: true,
        handler: (newValue) ->
          that = @
          @mutableHeaders.splice(0, @mutableHeaders.length)
          newValue.forEach (head) ->
            that.mutableHeaders.push head

And again - everything is fine in the virtual house, but the real one flatly refuses to be updated.
UPD:
Some functionality that is not related to Vue is activated by props, one of them is the tablesorter table sorting plugin. I turned it off and the table began to update. This, knesh, gives rise to a number of other questions, but this one, as such, is already irrelevant =)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question