[Vue 警告]：无效的道具：道具“物品”的类型检查失败。预期数组，得到 Promise

Question

我是整个节点技术堆栈的新手，并试图通过承担一个项目来提高自己。在这一点上，我已经取得了一定的成功（可能是偶然的），但我目前陷入困境。我的客户端正在使用“axios、vue、vue-router、vuetify”和其他一些。服务器端代码是“axios、bluebird、sequelize 和 sqlite3”。

我的问题如下，我试图通过进行以下函数调用来填充“v-data-table”：

<v-data-table
:headers="task_headers"
:items="getTasks(props.item.upgrade_id)"
hide-actions
item-key="task_id"
>

我的函数如下所示：

  methods: {
      async getTasks (id) {
      try {
        console.log('JAC in getTask value of id is: ', id)
        this.tasks = await TasksService.show(id)
        console.log('JAC value of this.tasks is typeof: ', typeof this.tasks)
        console.log('JAC value of this.tasks values are: ', Object.values(this.tasks))
        console.log('JAC value of this.tasks keys are: ', Object.keys(this.tasks))
        return this.tasks.data
      } catch (err) {
        console.log(err)
      }
   }

我的调试消息产生以下输出：

    JAC value of this.tasks is typeof:  object

    JAC value of this.tasks values are:  
    (6) [Array(9), 200, "OK", {…}, {…}, XMLHttpRequest]0: 


   JAC value of this.tasks keys are:  
   (6) ["data", "status", "statusText", "headers", "config", "request"]

this.tasks values Array of 9 携带从数据库返回的数据，我需要，但我不明白如何返回数据。我有许多其他服务调用到后端，它们工作得很好。v-data-table 需要一个数组，我不明白我缺少什么才能让它工作。

Answer 1

async getTasks(id) { <- 删除 async，并返回一个数组

您期望在 v-data-table 中有一个数组，并且具有 async 属性，它将返回一个承诺，因此您会收到该错误。

如果你不想删除它，你可以这样做。

getTasks(props.item.upgrade_id).then((data) => {
this.tasks = data;
})

<v-data-table
:headers="task_headers" 
:items="tasks"<- updated this line and no longer it will return a promisa
hide-actions
item-key="task_id"
>