CODEWITHSUNDEEP
laravelvue.jsvuetify.js
Subaru
Subaru

Reputation: 55

Laravel + Vuetify error: Error in render: this.items.slice is not a function" & Invalid prop: Expected Array, got Object

I'm using vuetify and laravel to display some data from an array using vuetify's data table. The data get's displayed on the table fine, but these two errors appear? I need some help as for what I can do to avoid these errors. Errors:

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

I've tried searching for the Invalid prop error for a while now but still nothing helped. As for the error in render part, this is where I really haven't found anything.

.Vue Data table:

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

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

How do I avoid these errors? Any help is appreciated, Thanks.

Upvotes: 0

Views: 2902

Answers (1)

skirtle
skirtle

Reputation: 29092

Both errors suggest you have a prop called items that is being passed an object instead of an array.

A candidate would be the prop called items here:

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

Based on those errors we can guess that the value lists might incorrectly be an object. Digging further, if we take a look in your JS code we find this:

data () {
    return {
        lists: {},

So your initial value is an object, not an array. Once your remote data shows up it will be replaced with an array and everything will appear to work correctly.

Try changing lists: {}, to lists: [],.

Upvotes: 3

Related Questions