Ошибка таблицы данных Vuetify, которая устраняется, если я принудительно перерисовываю - PullRequest
Новая
       73

Ошибка таблицы данных Vuetify, которая устраняется, если я принудительно перерисовываю

0 голосов
/ 14 июля 2020

У меня странная проблема с таблицей данных 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]: Ошибка обратного вызова для непосредственного наблюдателя "computedOptions" ":" TypeError: Невозможно прочитать свойство 'slice' с нулевым значением "

и

TypeError: Невозможно прочитать свойство 'slice' с нулевым значением

или

[Vue warn]: ошибка в получателе для наблюдателя "computedItems": "TypeError: невозможно прочитать свойство 'slice' of null"

До таблица не будет отображаться вообще, но если я добавлю 

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

к дочернему элементу, заставив его повторно отобразить таблицу, это будет нормально. Есть ли способ исправить эти ошибки? Спасибо миллион

1 Ответ

1 голос
/ 14 июля 2020

Vuetify выдает эту ошибку, если массив элементов, переданный в datatable, не определен или равен нулю. Быстрое решение - установить в ваших данных начальное значение от articles до [] вместо 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" }
      ]
    };
  },
...