0
183
ViewsCómo hacer arreglos multi-demencionales con listas de arreglos con axios y vue js
Soy bastante nuevo en axios y javascript y estoy muy confundido con la creación de matrices multidimensionales.
1. Quiero que mis datos se vean así:
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. Pero de la respuesta de axios, obtengo un resultado como este:
{user_no : 1, user_nickname : "hailey"} {user_no : 2 , user_nickname : "mandi"} {user_no : 3 , user_nickname : "loren"} {user_no : 4 , user_nickname : "james"}¿Cómo puedo envolver esas listas individuales en una matriz multidimensional para poder hacer #2 -> #1? Vi algunas funciones como flat que hace lo contrario de lo que quiero. Entonces, me preguntaba si hay alguna forma como esa para envolver todas las matrices con una matriz externa.
2 answers
Answer question0
No vi ningún problema con la respuesta de axios que está recibiendo. Como v-data-table necesita una array para iterar y obtiene lo mismo de la respuesta de la API.
Demostración de trabajo:
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>0
Estaba siendo estúpido. Como dijo la respuesta anterior, no hay nada malo con mis datos o código. Pero cuando estaba obteniendo datos, los objetos en realidad están dentro de los datos, por lo que la estructura era así:
response.data.data //i was calling it response.data ^^:;Gracias por la ayuda :D
