Vue computed property updated, but component did not re-render

Question

I am filling a vuetify data-table with data loaded asynchronously into a vuex store. User input can change the store, in which case I dispatch an action, that pulls some data asynchronously and commits changes.

To handle the component state when data is loading, I use a loading flag in the store. When the data is being loaded, it is set to loading so that the data table renders as empty

...
computed: {
  ... // a fairly long list of interdependent computed properties
  loading() {
    return store.state.loading
  },
  dataToDisplay() {
     if(this.loading){
        return []
     } else{
        return store.state.data
     }
  }
}

This works well, but sometimes the data-table component does not update, even though the computed property that feeds it is updated (See screenshot of vue dev tools).

There are several answers about why computed properties do not update (here, here). But what can explain that the computed property did update correctly, but the component did not re-render? How to fix it?

Someone mentioned here using a :key I tried that but the table content is still not updating.

[edit] providing the data-table code

<v-data-table 
   :key="loading"
   :headers="headers"
   :items="dataToDisplay"
   :item-key="itemId"
   disable-pagination hide-default-footer
>
  <template v-slot:item="row">
  <tr>
    <td class="text-xs-right">{{ row.item.currentCondition }}</td>
    <td class="text-xs-right">{{ row.item.nextCondition }}</td>
    <td class="mx-2">
      <v-btn icon class="mx-0" @click="editItem(row.item)">
        <v-icon color="teal">mdi-pencil</v-icon>
      </v-btn>
      <v-btn icon class="mx-0" @click="deleteItem(row.item)">
        <v-icon color="pink">mdi-delete</v-icon>
      </v-btn>
    </td>
  </tr>
  </template>
</v-data-table>

From this article, I could force re-render. That being said, I'd better know what is happening to come up with a better solution https://michaelnthiessen.com/force-re-render/ — Malo Marrec, Aug 27 '20 at 08:39
Your component will be automatically re-render if your `key` updated. otherwise you need to force re-render. — tuhin47, Aug 27 '20 at 08:41
OK, so what is the key of a data-table? Are you talking about item-key? To give more context, I am passing a [{col1:value, col2:value}, {col1:value,col2:value}] to `` — Malo Marrec, Aug 27 '20 at 08:49
*This works well, **but sometimes the data-table component does not update**.* when do you have this behavior ? please share the store code — Boussadjra Brahim, Aug 27 '20 at 08:59
The store is quite complex, but essentially the flow is: a user deletes or filters out a table element. This submits a request to firebase, and concurrently removes the element from the store. — Malo Marrec, Aug 27 '20 at 09:20

score 0 · Accepted Answer · answered Aug 27 '20 at 08:51

0

You could use a data attribute items: null which gets filled by your function and load them into your v-data-table using v-for: (item, i) in items

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :loading="loading"
  ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          { text: 'Name', align: 'start', value: 'name'},
          { text: 'Description', value: 'desc' },
        ],
        items: null,
        loading: true
      }
    },
    created: {
      addData() {
        this.items = store.state.data
        this.loading = store.state.loading
      }
    }
  }
</script>

answered Aug 27 '20 at 08:51

Nick van der Waal

414
2
13

Great, thanks! The user does modify the state from time to time though. It means that the state needs to be re-loaded after that. So I am guessing the created() hook will work for initialization, but not afterwards. – Malo Marrec Aug 27 '20 at 08:54
Vuetify made it so that the datatable updates when the items used in `v-for` change. you could use computed, but I would highly recommend also using a data attribute. – Nick van der Waal Aug 27 '20 at 08:56
I am not using v-for however (Sorry about the vagueness of the question, I updated the template). In your solution, where would the logic for updating the items after a user action be? Would they be inside a method then, instead of being triggered through a computed field? – Malo Marrec Aug 27 '20 at 12:39

Vue computed property updated, but component did not re-render

1 Answers1