如何解决Vue计算的属性已更新,但组件未重新呈现
我正在用异步加载到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 dev工具的屏幕截图)。
对于为何不更新计算属性的问题,有几个答案(here,here)。但是什么能解释计算出的属性确实更新正确,但组件没有重新渲染?如何修复它?
有人用:key
提到了here,但我尝试过,但表格内容仍未更新。
[edit]提供数据表代码
<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>
解决方法
您可以使用由函数填充的数据属性items: null
,然后使用v-data-table
将它们加载到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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。