Vuetify Data Table Error that resolves if I force rerender - vue.js

Question

I am having a weird issue with Vuetify data table. I have two files that are relevant:
The parent:
<!-- DataTable component with articles and headers passed as props -->
<ArticleTable :propData="articles" :headers="headers"></ArticleTable>
<script>
//Add data
data() {
return {
//For the article list from the server
articles: null,
//Headers for Datatable
headers: [
{ text: "Article #", value: "articleID" },
{ text: "Title", value: "articleTitle" },
{ text: "Content", value: "articleContent" },
{ text: "Click to Like", value: "liked", sortable: false },
{ text: "Likes", value: "articleLikes" }
]
};
},
//When the component is first created, call method
created() {
this.getArticles();
},
//Methods
methods: {
getArticles() {
this.error = null;
//Sets parameters from external file
let url = serverDetails.url;
let params = { ...serverDetails.params };
//GET request for all articles
axios
.get(`${url}articles`, {
params
})
//On success save response in articles variable
.then(response => {
this.articles = response.data;
console.log("Articles found: ", response.data);
})
//Catch and display any errors
.catch(error => {
this.error = error.toString();
console.log("Error on retriving articles: " + error);
});
}
}
};
Which makes a request to my server and pulls back a list of articles. This is then passed to the child component:
<template>
<div>
<!-- Vuetify data table -->
<v-data-table
:items="propData"
:headers="headers"
:search="search"
:custom-filter="filter"
:key="renderKey"
>
</v-data-table>
<script>
"use strict";
export default {
name: "ArticleTable",
//Add props
props: {
propData: {
type: Array
},
headers: {
//Expects compulsory Array
type: Array,
required: true
}
},
//Add data
data() {
return {
//Render key
renderKey: 0,
};
},
</script>
(I have cut out as much irrelevant material as possible). However I am getting a weird problem with the data table, the console if throwing several errors, all roughly saying some version of:
[Vue warn]: Error in callback for immediate watcher "computedOptions": "TypeError: Cannot read property 'slice' of null"
and
TypeError: Cannot read property 'slice' of null
or
[Vue warn]: Error in getter for watcher "computedItems": "TypeError: Cannot read property 'slice' of null"
Before the table would not render at all but if I add
beforeUpdate() {
this.renderKey += 1;
},
to the child, forcing it to re render the table appears fine.
Is there any way to resolve those errors?
Thanks a million

Answer 1

Vuetify throw this error when the items array passed to datatable is undefined or null. A quick sollution is to set in your data the initial value of articles to [] instead of null.
data() {
return {
//For the article list from the server
articles: [], // this should always be an array, even if empty
//Headers for Datatable
headers: [
{ text: "Article #", value: "articleID" },
{ text: "Title", value: "articleTitle" },
{ text: "Content", value: "articleContent" },
{ text: "Click to Like", value: "liked", sortable: false },
{ text: "Likes", value: "articleLikes" }
]
};
},