I am trying to create a Treeview with multiple Levels of Children. When I click on the last child, I want to run an Axios call to pull information for this child from the database and display that in a data table. Of course, when I click on another child, I need the data erased and the data table refreshed or if no data is available the message should come up again.
I have used vuetify to implement it. I am not sure I fully understand the selected() method. I first did my AJAX call in there but that wasn't really successful and it would add up the data to the previous.
Then I added @update:active="clickOnNode" and created the method to pull in the data. That seems to work sometimes, but not all the time, especially when I try to go back to a child which has been open before. The data which is returned from the server is correct, so it must be in VUE and how I deal with it. I must be doing something terribly wrong. Am I right to use @update:active or is it supposed to go into the selected() method? And how do I refresh the data table with the new data?
UPDATE It seems to partly work with my code below but fails as soon I click on a child without any data for the data table. So what I need is to somehow empty and reset the data table at that time, otherwise, I seem to get all sort of Javascript errors like
Error in getter for watcher "pageCount": "TypeError: can't access property "slice", this.items is null"
etc. If I click between children with data, then the @update:active="clickOnNode" seems to load my correct data. Any idea how I could fix that?
<template>
<v-card>
<v-card-title class="indigo white--text headline">
Container Overview
</v-card-title>
<v-row
class="pa-4"
justify="space-between"
>
<v-col cols="5">
<v-treeview
:active.sync="active"
:items="allTopContainers"
:load-children="fetchChildren"
:open.sync="open"
item-key="id"
activatable
color="warning"
open-on-click
transition
@update:active="clickOnNode"
>
<template v-slot:prepend="{ item, active }">
<v-icon v-if="!item.children">mdi-account</v-icon>
</template>
</v-treeview>
</v-col>
<v-divider vertical></v-divider>
<v-col
class="d-flex"
>
<v-scroll-y-transition mode="out-in">
<div
v-if="!selected"
class="title grey--text text--lighten-1 font-weight-light"
style="align-self: center;"
>
No Data
</div>
<v-card
v-else
:key="selected.id"
class="pt-6"
flat
>
<v-divider></v-divider>
<v-row
class="text-left"
tag="v-card-text"
>
<v-col
class="mr-4 mb-2"
>
<v-data-table
:headers="headers"
:items="containerContent"
:items-per-page="100"
class="elevation-1"
></v-data-table>
</v-col>
</v-row>
</v-card>
</v-scroll-y-transition>
</v-col>
</v-row>
</v-card>
</template>
<script>
import 'vuetify/dist/vuetify.min.css'
export default {
data: () => ({
allTopContainers:[],
active: [],
open: [],
containerContent: [],
headers: [
{
text: 'Qty',
align: 'start',
sortable: false,
value: 'qty',
},
{ text: 'Barcode', value: 'barcode' },
{ text: 'No', value: 'no' },
{ text: 'Name', value: 'name' },
],
}),
computed: {
items () {
return [
{
name: 'Container',
children: this.allTopContainers,
},
]
},
selected () {
if (!this.active.length) return undefined
const id = this.active[0]
/*
.then(res => res.json())
.then(json => (this.containerContent.push(...json)))
.catch(err => console.warn(err))
*/
// return this.allTopContainers.find(allTopContainer => allTopContainer.id === id)
},
},
mounted() {
this.getZones();
},
methods: {
getZones() {
axios.get('/get-all-zones').then(response => {
this.allTopContainers = response.data;
});
},
async fetchChildren (item) {
if(item.containerType != '1') {
return fetch('/get-children-containers/' + item.containerType + '/' + item.id)
.then(res => res.json())
.then(json => (item.children.push(...json)))
.catch(err => console.warn(err))
}
},
clickOnNode(node){
axios.get('/get-container-content/' + node)
.then(response => {
this.containerContent = response.data;
});
// .catch(err => console.warn(err))
}
} // end of methods
}
</script>