Can't implemented props using API from different js file in vue

vuetify
javascript-basics

#1

Currently i want to try to get data from API in vue js using props but i can’t implemented it, first i already use props to read a sample data and it is success but when i’m trying using API it failed event I tried to change a very minimum code from my sample data.

i already read this topic but it still not solve my problems:

Understanding props in vue.js

Using v-model with a prop on VUE.JS

this is my code for API:

import {HTTP} from '../http-common';

var id = null;
var email = null;
var phone = null;
var password = null;
var admins = null;

const Admins = [
    HTTP.get('users/admin')
    .then(response => {
      console.log(response.data.data)
      admins = response.data.data;
      id = response.data.data._id;
      email = response.data.data.email;
    })
  ];

const getAdminById = (id) => {
  return (id === undefined) ? Admins[0] : Admins.find(x => x.id === id);
};

const getAdmin = (limit) => {
  return (limit) ? Admins.slice(0, limit) : Admins;
};

export {
  Admins,
  getAdmin,
  getAdminById
};

this is my sample data:


const Items =  [
  {
    'uuid': '65a6eb21-67b5-45c3-9af7-faca2d9b60d4',
    'name': 'Dessie',
    'email': 'Dessie7937@gmail.com',
    'username': 'Dessie79',
    'jobTitle': 'Web Developer',
    'phone': '1-360-812-9380 x511',
    'avatar': '/static/avatar/a2.jpg',
    'status': false,
    'address': {
      'street': '655 Archibald Groves',
      'suite': 'Apt. 818',
      'city': 'Carlosshire',
      'state': 'Arkansas',
      'country': 'Somalia',
      'zipcode': '10406',
      'geo': {
        'lat': '-44.6063',
        'lng': '-169.7706'
      }
    },
  },
  {
    'uuid': 'b5899bef-d01e-42d8-af2d-edfb16b6b21e',
    'name': 'Calista',
    'jobTitle': 'Programmer',
    'email': 'Calista_Mertz1757@hotmail.com',
    'username': 'Calista_Mertz17',
    'phone': '961-703-4134',
    'avatar': 'https://s3.amazonaws.com/uifaces/faces/twitter/moscoz/128.jpg',
    'status': false,
    'address': {
      'street': '886 Wendy Circles',
      'suite': 'Apt. 933',
      'city': 'Lake Loy',
      'state': 'Rhode Island',
      'country': 'South Africa',
      'zipcode': '65261',
      'geo': {
        'lat': '-58.9245',
        'lng': '-43.6330'
      }
    }
  },
  {
    'uuid': '7d910620-84e1-49fc-951e-d375587b8189',
    'name': 'Jackeline',
    'jobTitle': 'Sales Executive',
    'email': 'Jackeline.Abshire_Dach@yahoo.com',
    'username': 'Jackeline.Abshire',
    'phone': '(326) 903-5706 x6854',
    'avatar': 'https://s3.amazonaws.com/uifaces/faces/twitter/larrybolt/128.jpg',
    'status': false,
    'address': {
      'street': '416 Cathy Spur',
      'suite': 'Apt. 431',
      'city': 'North Camila',
      'state': 'Pennsylvania',
      'country': 'Libyan Arab Jamahiriya',
      'zipcode': '31751',
      'geo': {
        'lat': '64.0673',
        'lng': '154.7671'
      }
    }
  },
];

const getUserById = (uuid) => {
  return (uuid === undefined) ? Items[0] : Items.find(x => x.uuid === uuid);
};

const getUser = (limit) => {
  return (limit) ? Items.slice(0, limit) : Items;
};

export {
  Items,
  getUser,
  getUserById
};

this is my current code to get the list:

<template>
<div class="chat-contact">
               
  <vue-perfect-scrollbar class="chat-history--scrollbar">
    <v-divider></v-divider>
    <v-list two-line class="chat-contact--list">

      <!-- Table Start -->

      <v-flex lg12 md12>
        <v-toolbar card color="white">
          <v-text-field
          flat
          solo
          prepend-icon="search"
          placeholder="Type something"
          v-model="search"
          hide-details
          class="hidden-sm-and-down"
          ></v-text-field>     
        </v-toolbar>
  
        <v-divider></v-divider>
  
        <v-data-table
          :headers="complex.headers"
          :search="search"
          :items="complex.items"
          :rows-per-page-items="[10,25,50,{text:'All','value':-1}]"
          item-key="name"
          v-model="complex.selected"
          >
          <template slot="items" slot-scope="props">
            <td>{{ props.item.admins[item].id }}</td>
            <td>{{ props.item.admins[item].email }}</td>
            <td>
              <v-btn depressed outline icon fab dark color="primary" small :to="editAdmin(props.item.admins[item].id)">
                <v-icon>edit</v-icon>
              </v-btn>
              <v-btn depressed outline icon fab dark color="pink" small @click="deleteItem(props.item.admins[item].id)">
                <v-icon>delete</v-icon>
              </v-btn>
            </td>
          </template>
        </v-data-table>
      </v-flex>  

      <!-- Table End -->
      
    </v-list>  
  </vue-perfect-scrollbar>  
</div>
</template>

<script>
import {HTTP} from '../../http-common';

import { getAdmin } from '@/api/admin';
import { Admins as Users } from '@/api/admin';

import VCircle from '@/components/circle/VCircle';
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
import VWidget from '@/components/VWidget';

export default {
  components: {
    VuePerfectScrollbar,
    VCircle,
    VWidget
  },

  data: () => ({ 
  }),

  data () {
    return {
      search: '',
      complex: {
        headers: [
          {
            text: 'Id',
            value: 'id'
          },
          {
            text: 'Email',
            value: 'email'
          },
          {
            text: 'Action',
            value: ''
          },
        ],
        items: Users
      }
    };
  },

  computed: {
    users () {
      return getAdmin();
    }
  },

  methods: {

    initialize(){
      this.items = Users;
      console.log("Cek Items : ", this.items);
    },

    deleteItem (item) {
      // const index = this.items.indexOf(item);
      console.log("Item Succesfully Deleted");
    },

    editAdmin (id) {
      return '/edit-admin/' + id;
    },

    firstLetter (name) {
      return name.charAt(0);
    },

    userStatusColor (item) {
      return (item.active) ? 'green' : 'grey';
    }    
  }  
};
</script>

<style>

</style>

when i tried to use console.log, it success to read it like this:

console.log image

what i want to achieved

Right,now I’m here

Can someone help me with this problem? or can i use v-for for this problem?


#2

You seem to have some misunderstandings about how asynchronous opertions (like an AJAX/HTTP request) work in javascript.

const Admins = [
    HTTP.get('users/admin')
    .then(response => {
      console.log(response.data.data)
      admins = response.data.data;
      id = response.data.data._id;
      email = response.data.data.email;
    })
  ];

You expect the above code to fill the array Admins with user objects, but that won’t happen. That array will contain one Object, an instance of Promise.

You cannot pre-fill this array before it gets exported (which would require it to be a synchronous process).

I’ll have to think about how to re-write your code to make it work and help you understand the mistake, but it’s not thats simple because basically from that initial misunderstanding, a lot of wrong code resulted.