如何使用axios和vue js制作带有数组列表的多维数组

Question

我对 axios 和 javascript 很陌生，我对制作多维数组很困惑。

1。我希望我的数据看起来像：

userList: [
                    {
                        user_no: 1,
                        user_nickname: "hailey",
                    },
                    {
                        user_no: 2,
                        user_nickname: "mandi",
                    },
                    {
                        user_no: 3,
                        user_nickname: "loren",
                    },
                    {
                        user_no: 4,
                        user_nickname: "james",
                    },
],

2。但是从 axios 响应中，我得到这样的结果：

{user_no : 1, user_nickname : "hailey"}
{user_no : 2 , user_nickname : "mandi"}
{user_no : 3 , user_nickname : "loren"}
{user_no : 4 , user_nickname : "james"}

如何将这些单独的列表包装到多维数组中，以便生成 #2 -> #1？我看到了一些函数，比如 flat，它与我想要的相反。所以我想知道是否有任何类似的方法可以用外部数组包装所有数组。

Answer 1

我没有发现您收到的 axios 回复有任何问题。由于 v-data-table 需要 array 进行迭代，并且您从 API 响应中得到相同的结果。

工作演示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dataList: [{
            "user_no": 1,
            "user_nickname": "hailey"
    },
    {
      "user_no": 2,
      "user_nickname": "mandi"
    },
    {
      "user_no": 3,
      "user_nickname": "loren"
    },
    {
      "user_no": 4,
      "user_nickname": "james"
    }]
  }),
  computed: {
    gridHeaders() {
      return [
        { text: "User Number", value: "user_no" },
        { text: "User Nickname", value: "user_nickname" }
      ];
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.0/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
    <v-data-table :headers="gridHeaders" :items="dataList" item-key="user_no">
    </v-data-table>
</div>

Answer 2

我是傻了。正如上面的答案所说，我的数据或代码没有任何问题。但是当我获取数据时，对象实际上是数据，所以结构是这样的：

response.data.data //i was calling it response.data ^^:;

谢谢你的帮助:D

如何使用axios和vue js制作带有数组列表的多维数组

How to make multi-dementional arrays with array lists wiht axios and vue js

javascript

arrays

multidimensional-array

vue.js

axios

1。我希望我的数据看起来像：

2。但是从 axios 响应中，我得到这样的结果：