如果我强制重新渲染，Vuetify 数据表错误会解决

Question

我在使用 Vuetify 数据表时遇到一个奇怪的问题。我有两个相关的文件：父文件：

<!-- 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);
        });
    }
  }
};

它向我的服务器发出请求并拉回文章列表。然后将其传递给子组件：

<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>

（我已经尽可能多地删去了不相关的内容）。然而，我在数据表中遇到了一个奇怪的问题，控制台如果抛出几个错误，大致都是以下版本：

[Vue warn]：立即观察器“compulatedOptions”的回调中出现错误：“TypeError：无法读取 null 的属性“切片””

和

类型错误：无法读取 null 的属性“切片”

或者

[Vue warn]：观察者“compulatedItems”的 getter 中出现错误：“TypeError：无法读取 null 的属性‘切片’”

在表格根本不会呈现之前，但如果我添加

 beforeUpdate() {
    this.renderKey += 1;
  },

对于孩子来说，强制它重新渲染表格看起来很好。有什么办法可以解决这些错误吗？太感谢了

Answer 1

当传递给数据表的项目数组未定义或为 null 时，Vuetify 会抛出此错误。一个快速的解决方案是在数据中设置初始值articlesto[]而不是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" }
      ]
    };
  },