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:
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': '[email protected]',
'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': '[email protected]',
'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': '[email protected]',
'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:
Can someone help me with this problem? or can i use v-for for this problem?
