Databind for grid is not rebinding when order of data changes

Question

Using Vue, I have a list of data that I need to be binded to a table. I have created a computed property that will filter and sort the list based on certain parameters.

Initally, I had all the logic in one file, which worked fine, but was very slow. I learned that creating components for table data can improve performance so I've taken my v-for loop and pushed each item into it's own component.

This did provide some performance increase but now my sorting function has stopped working. The v-for iterates over the computed property and when the data changes order, it doesn't reorder the list of objects in the UI. but checking the console, the list did change order. Is there some call I need to do to rebind the datalist. I would think destroying and recreating the list, but I'm trying to increase performance.

                <thead class="tableHeader">
                    <tr>
                        <th @click="changeSort(header)" class="text-no-wrap" v-for="header in fields" scope="col" v-bind:key="header">
                            {{ header }} <i class="fa fa-sort" v-bind:class="{'fa-sort':sortTracker !=header, 'fa-sort-desc': (sortDirection=='2' && sortTracker==header),'fa-sort-asc': (sortDirection =='1' && sortTracker==header)}" />
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <div v-for="(protocol, index) in filterList" v-bind:key="index" class="data-row">
                        <MonitoringStatusListItem  class="data-row" v-if="hasAccess(protocol.ProtocolID,'Monitoring Status')" :protocol="protocol" />
                    </div>
                </tbody>
            </table>``

score 0 · Answer 1 · answered Oct 29 '21 at 04:22

To increase performance, I think you should filter list before render.

Ex:

computed: {
   monitoringProtocol() {
    return protocol.filter (item => hasAccess(protocol.ProtocolID,'Monitoring Status')
   }
}

Template:

<tbody>
    <div v-for="(monitoringProtocol, index) in filterList" v-bind:key="index" class="data-row">
        <MonitoringStatusListItem  class="data-row" :protocol="protocol" />
    </div>
</tbody>

Databind for grid is not rebinding when order of data changes

1 Answers1