javascript - 如何使用新数据和新列更新 vuetify 数据表组件
问题描述
我想知道如何获取现有的(初始)v-data-table 组件,其中填充了 :headers 和 :items 道具,然后使用新数据和新列标题完全重新渲染组件?是否有特殊的更新或销毁原生 Vue 或 Vuetify 的方式来做到这一点?
我希望我的用户体验是:查看挂载时创建的初始表,选择新列,单击更新,队列加载器图标,使用新项目和新标题重新呈现表。
提前致谢。
解决方案
VDataTable
headers
由您通过&提供给它的数据驱动items
。如果源发生变化,表格也会发生变化。所以,不要做任何其他事情,只需更新源(以反应方式)&您的表将根据提供给它的新数据集进行更新。
new Vue({
el: '#app',
vuetify: new Vuetify(),
computed: {
headers() {
return this.items.length ? Object.keys(this.items[0]).map(key => ({
value: key,
text: key
})) : []
}
},
data() {
return {
items: []
}
},
methods: {
async fetchData(type) {
const response = await fetch(`https://jsonplaceholder.typicode.com/${type}`)
this.items = await response.json()
console.log(this.items)
},
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-row>
<v-col>
<v-btn-toggle>
<v-btn @click="fetchData('users')">
FETCH USERS
</v-btn>
<v-btn @click="fetchData('posts')">
FETCH POSTS
</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
<v-row>
<v-col>
<v-data-table :headers="headers" :items="items" />
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
推荐阅读
- reactjs - 将 async await 与 redux reducer 一起使用
- barcode - Zbar Code128 解码错误
- zapier - zapier 以编程方式设置捆绑包输入数据
- kubernetes - Pod 无法通过服务 IP 连接到自身(kubernetes v1.10)
- java - 由 java.lang.IllegalArgumentException 引起:MediaButtonReceiver 组件可能不为空
- r - R中的条件交叉表
- gradle - gradle - configure() 方法有什么作用
- django - 发布请求在 ListView 内的 get_queryset 函数内不可用
- dart - 在按钮单击时更新颤动中的文本字段
- java - java ClassLoader中为什么没有unloadClass(String name)方法