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

3 Answers 3

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