Vuetify Data Table Error that resolves if I force rerender

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

Igor Moraru Igor Moraru · Accepted Answer · 2020-07-14T14:10:41

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" }
      ]
    };
  },

Vuetify Data Table Error that resolves if I force rerender

1 Answers