Answer the question
In order to leave comments, you need to log in
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>
watch:
headers:
deep: true,
handler: (newValue) ->
@mutableHeaders.splice(0, @mutableHeaders.length)
@$set @, 'mutableHeaders', newValue
mounted: ->
@mutableHeaders.splice(0, @mutableHeaders.length)
Vue.set @, 'mutableHeaders', @headers
watch:
headers:
deep: true,
handler: (newValue) ->
that = @
@mutableHeaders.splice(0, @mutableHeaders.length)
newValue.forEach (head) ->
that.mutableHeaders.push head
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question