Question

我是vuejs的新手，正在尝试使用buefy库。

错误：

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

public class Cat : Animal
{
    public override int X { get; set; }
}

json内容：

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

我想念什么？谢谢：）

Answer 1

正如我在此处（https://buefy.org/documentation/table#api-view看到Buefy doc一样，表组件期望数据作为对象数组。

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

Answer 2

数据声明属性应如下：

 data: []

更新的代码：

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

Answer 3

知道了！

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

</script>

Thx：）

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

3 个答案: