无效的道具：道具“数据”的类型检查失败。 预期数组，得到对象

Question

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

Answer 1

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>

Answer 2

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

Answer 3

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