CODEWITHSUNDEEP
javascriptvuejs2axios
Thomazzi
Thomazzi

Reputation: 59

Invalid prop: type check failed for prop "data". Expected Array, got Object

I'm new to vuejs and trying to use the buefy library.

Error :

Invalid prop: type check failed for prop "data". Expected Array, got Object 

<template>
    <b-table :data="data" :columns="columns"></b-table>
</template>

<script>
    export default {
        data() {
            return {
                data: this.data,
                columns: [
                    {
                        field: 'name',
                        label: 'Name',
                    },
                ]
            }
        },
        mounted() {
            axios
            .get('/test')
            .then(
                response => (this.data = response)
            )
        }
    }

</script>

The json content:

[{"name":"test"}]

What did I miss? Thx :)

Upvotes: 4

Views: 37581

Answers (3)

Naren
Naren

Reputation: 4470

As I see Buefy doc here(https://buefy.org/documentation/table#api-view), Table component expecting data as an Array of Objects.

Axios returns the response in detail, you're assigning response to this.data and which object, that's causing this error. So your data will be coming in as response.data

data() {
  return { data: []}
}

async mounted() {
    try {
       const { data } = await axios.get('/test')
       this.data = data
    } catch(err) {
       console.err(err)
    }

}

In case, if anyone wonders, how to declare a prop with multiple types. Here's an example.

...
props: {
  value: {
    type: String | Number | Boolean | Object, or [Number, String, Object]
    default: ''
  }
}

Upvotes: 1

Thomazzi
Thomazzi

Reputation: 59

Got it!

<script>
    export default {
        data() {
            return {
                data: [],
                columns: [
                    {
                        field: 'name',
                        label: 'Name',
                    },
                ]
            }
        },
        mounted() {
            axios
            .get('/test')
            .then(
                response => (this.data = response.data)
            )
        }
    }

</script>

Thx :)

Upvotes: -4

Riddhi
Riddhi

Reputation: 2244

The declaration of data property should be as below:

 data: []

Updated code:

<script>
export default {
    data() {
        return {
            data: [],
            columns: [
                {
                    field: 'name',
                    label: 'Name',
                },
            ]
        }
    },
    mounted() {
        axios
        .get('/test')
        .then(
            response => (this.data = response)
        )
    }
}
</script>

Upvotes: 8

Related Questions