无法使用来自不同js文件的API在vue中实现道具

问题描述 投票：0回答：1

目前我想尝试使用道具在vue js中使用API​​的get数据，但我无法实现它，首先我已经使用道具来读取示例数据并且它是成功但是当我尝试使用API​​时它失败了我试过的事件从我的示例数据中更改最小代码。

我已经阅读过这个主题，但它仍然无法解决我的问题：

Understanding props in vue.js

Using v-model with a prop on VUE.JS

这是我的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
};

这是我的样本数据：


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
};

这是我目前获取列表的代码：

<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>

当我试图使用console.log时，它成功地读取它：

console.log image

what i want to achieved

Right,now I'm here

有人可以帮我解决这个问题吗？或者我可以使用v-for来解决这个问题吗？

javascript api vue.js vuetify.js
1个回答
0
投票

在这种方法中

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

您在数据中设置项目，但没有名称项目的属性：

    return {
      search: '',
      complex: {
        headers: [
          {
            text: 'Id',
            value: 'id'
          },
          {
            text: 'Email',
            value: 'email'
          },
          {
            text: 'Action',
            value: ''
          },
        ],
        items: Users // this is inside 'complex'
      }
    };
  },

试试这个：

this.complex.items = Users;

或者，如果您需要向数据添加新属性，请使用$ set：

this.$set(this.$data, 'items', Users)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.