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

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

• javascript
• vuejs2
• axios

Share Improve this question Follow asked Apr 10, 2019 at 13:49 ThomazziThomazzi 5911 gold badge11 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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>

As I see Buefy doc here(https://buefy/documentation/table#api-view), Table ponent 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 ing 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: ''
  }
}

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