잘못된 소품: 소품 "data"에 대한 형식 검사에 실패했습니다.어레이가 필요하지만 오브젝트가 있습니다.

잘못된 소품: 소품 "data"에 대한 형식 검사에 실패했습니다.어레이가 필요하지만 오브젝트가 있습니다.

저는 Vuejs에 처음 와서 Buefy 라이브러리를 사용하려고 합니다.

오류:

잘못된 소품: 소품 "data"에 대한 형식 검사에 실패했습니다.어레이가 필요하지만 오브젝트가 있습니다.

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

json 내용:

[{"name":"test"}]

내가 뭘 놓쳤지?Thx :)

데이터 속성 선언은 다음과 같습니다.

 data: []

업데이트된 코드:

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

여기 Buefy 문서(https://buefy.org/documentation/table#api-view), 표 컴포넌트에는 객체 배열로서의 데이터가 필요합니다.

Axios는 세부 응답을 반환합니다. 할당하는 중입니다.response로.this.data이 에러의 원인이 되고 있는 오브젝트입니다.따라서 데이터는 다음과 같이 수신됩니다.response.data

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

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

}

여러 종류의 소품을 어떻게 신고해야 하는지 궁금할 수도 있습니다.여기 예가 있어요.

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

알았다!

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

</script>

Thx :)

언급URL : https://stackoverflow.com/questions/55614253/invalid-prop-type-check-failed-for-prop-data-expected-array-got-object