时间戳

首页 > 解决方案 > 如果我强制重新渲染，Vuetify 数据表错误会解决

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

问题描述

我对 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 警告]：即时观察者“computedOptions”的回调错误：“TypeError：无法读取属性‘slice’ of null”

和

TypeError：无法读取 null 的属性“切片”

或者

[Vue警告]：观察者“computedItems”的getter错误：“TypeError：无法读取属性'slice' of null”

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

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

对孩子来说，强迫它重新渲染表格看起来很好。有没有办法解决这些错误？太感谢了

标签： vue.jsdatatableaxiosfrontendvuetify.js

解决方案

当传递给数据表的项目数组未定义或为空时，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" }
      ]
    };
  },

推荐阅读