Vue 计算属性已更新，但组件未重新渲染

Question

我正在用异步加载到 vuex 存储中的数据填充 vuetify 数据表。 用户输入可以更改存储，在这种情况下，我 dispatch 一个动作，异步拉取一些数据，commits 更改。

为了在数据加载时处理组件状态，我在商店中使用了loading 标志。加载数据时，设置为loading，这样数据表就会呈现为空

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

这很好用，但有时数据表组件不会更新，即使提供它的计算属性已更新（参见 vue 开发工具的屏幕截图）。

关于为什么计算属性不更新有几个答案（here、here）。但是有什么可以解释计算的属性确实更新正确，但组件没有重新渲染？如何解决？

有人提到here 使用:key 我试过了，但表格内容仍然没有更新。

[编辑] 提供数据表代码

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

Answer 1

您可以使用数据属性 items: null 由您的函数填充并使用 v-for: (item, i) in items 将它们加载到您的 v-data-table 中

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