Laravel + Vuetify error: Ошибка при рендеринге: this.items.slice не является функцией "& Invalid prop: Ожидаемый массив, полученный объект

Question

Я использую vuetify и laravel для отображения некоторых данных из массива, используя таблицу данных vuetify. Полученные данные отображаются в таблице нормально, но эти две ошибки появляются? Я нуждаюсь в некоторой помощи относительно того, что я могу сделать, чтобы избежать этих ошибок. Ошибки:

Error in render: "TypeError: this.items.slice is not a function"
Invalid prop: type check failed for prop "items". Expected Array, got Object

Я уже некоторое время пытался найти ошибку Invalid prop, но все равно ничего не помогло. Что касается ошибки в части рендеринга, то здесь я действительно ничего не нашел.

. Таблица данных:

<v-data-table 
    :headers="headers"
    :items="lists"
    class="elevation-1"
  >
   <v-btn color="success">Success</v-btn> 
    <template v-slot:items="lists">
      <td class="text-xs-left">{{ lists.item.Customer }}</td>
      <td class="text-xs-right">{{ lists.item.Address }}</td>
      <td class="justify-center layout px-0">
        <v-icon small class="mr-2" color="teal">visibility</v-icon>
        <v-icon small class="mr-2" color="orange darken-2">edit</v-icon>
        <v-icon small color="red darken-2">delete</v-icon>
      </td> 
    </template>

сценарий:

<script>
let Add = require('./Add.vue');
  export default {
    components: { Add },
    data () {
      return {
        lists:{},
        errors:{},
        headers: [
          {
            text: 'Customer',
            align: 'left',
            value: 'Customer'
          },
          { text: 'Address', value: 'Address' },
          { text: 'Contact No', value: 'CustomerContactNo' },
   ],

      }
    },
    mounted(){
          axios.post('/getData')
          .then((response)=> this.lists = response.data)
          .catch((error) => this.errors = error.response.data)
        }
  }
</script>

Как мне избежать этих ошибок? Любая помощь приветствуется, спасибо.

Answer 1

Обе ошибки предполагают, что у вас есть реквизит items, которому передается объект вместо массива.

Кандидатом будет опора, названная items здесь:

<v-data-table 
    :headers="headers"
    :items="lists"
    class="elevation-1"
  >

На основании этих ошибок мы можем догадаться, что значение lists может быть неверным объектом. Копаем дальше, если мы посмотрим на ваш код JS, мы найдем это:

data () {
    return {
        lists: {},

Таким образом, ваше начальное значение является объектом, а не массивом. Как только ваши удаленные данные появятся, они будут заменены массивом, и все будет работать правильно.

Попробуйте изменить lists: {}, на lists: [],.