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值9的数组正在承载从我需要的db返回的数据，但是我不知道如何返回数据。我还有许多其他对后端的服务呼叫，它们工作正常。 v-data-table期望使用数组，但我不明白要使它正常工作所缺少的东西。

Answer 1

async getTasks（id）{<-删除异步，并返回一个数组

您期望在v-data-table中有一个数组，并带有async属性，它将返回一个promise，因此您遇到了该错误。

如果您不想删除它，则可以执行以下操作。

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

[Vue警告]：道具无效：道具“物品”的类型检查失败。预期的阵列，得到了承诺

1 个答案: