Vue方法返回属于单个用户的所有属性返回[object Object]答案

【问题标题】：Vue method to return all properties belonging to a single user returning [object Object]Vue方法返回属于单个用户的所有属性返回[object Object]
【发布时间】：2021-08-22 21:11:11
【问题描述】：

下面是一个下拉列表，理想情况下应该显示属于特定用户的所有表的列表。

<v-select
    :items="allTables"
    :item-text="tableNames"
    return-object
/>

这是allTables的结构。可能或多或少取决于用户：

[
    {
        "id": 3,
        "name": "TABLE"
    },
    {
        "id": 4,
        "name": "KOP"
    }
]

这是显示tableNames的方法：

tableNames() {
    this.allTables.forEach(el => {
        return element.map(a=>a.name)
    });
},

最初是这样的（但是它导致了我在其中一个答案中列出的错误）：

tableNames: item => item.name;

控制台日志记录

console.log(el.map(a=>a.name))

在上面的方法中返回一个如下所示的数组（'TABLE' 是一个表的名称，'KOP' 是另一个表的名称）。

它没有返回任何错误，但 v-select 的选项返回 [object Object]。我不确定我做错了什么，我能问一下为什么它会返回这个吗？

获取所有表的函数：

public function retrieveAllTables()
{
    return Auth::user()->client->tables()->get();
}

数据变量：

data: () => ({
    allTables: []
}),

API 请求：

getAllTables() {
    apiClientGet(
        routes["pages.retrieveAllTables"],
        null,
        response => {
            this.allTables.push(response.data.flat());
            // console logging this.allTables shows the structure above
        }
    );
},

【问题讨论】：

tableNames 不返回任何内容。你在那里误用了 forEach。
我将其读作“对于数组中的每个表（项目），记录名称”。哪个对我来说是有道理的（尽管如果我错了，因为这个问题很可能是这种情况，我可以问为什么它不返回任何东西吗？）是否需要将其写为计算值？
如果不返回值，记录的目的是什么（它不记录，它是一个 noop）？ tableNames() === undefined 在你的情况下。

标签： javascript arrays json vue.js vuetify.js

【解决方案1】：

问题在于 api 请求实际上并没有将响应推送到 allTables。

getAllTables() {
    apiClientGet(
        routes["pages.retrieveAllTables"],
        null,
        response => {
            this.allTables = response.data;
            return this.allTables;
        }
    );
},

我想通了，因为在 beforeMount 中记录 allTables 的控制台在它不应该返回一个空数组时返回了一个空数组

【讨论】：