Vue-Tables-2从其他组件获取数据

时间:2018-01-10 19:12:34

标签: javascript vuejs2 axios vue-tables-2

我创建了一个管理面板,以查看有关vue2.js中用户和组的一些信息。

在我的overview.vue页面中,我使用axios.get请求从后端收集所有数据。现在我尝试将我的overview.vue中的这些数据传递给我使用vue-tables-2创建的所有表。我在VueTables.vue中尝试使用道具,并将我的标签从overview.vue传递给VueTables.vue。

在我的VueTables.vue中,我收集类似JSON的数据,但我不知道如何在我的vueTables中使用它们,因为我无法将它们链接到我的“fields”字段。 如果我像

一样使用它
fields: [this.users.username, this.users.email] 

我收到一个引用错误,该字段未定义。 如果我这样试试

fields: ['this.users.username,...]

它只是将“this.users.username”显示为Headers但不再显示数据。

这里是我的概述。剪辑:

<vue-table :users="users"></vue-table>

<script>
import Mixins from "../mixins.js";
import axios from "axios";
import Cookie from "../js/Cookie.js";
import Config from "../js/Config.js";

import VueTable from "@/components/VueTable.vue";

export default {
  name: "overview",
  mixins: [Mixins],
  components: {
    VueTables,
  },
  data() {
    return {
      users: [],    
    };
  },

>   mounted: function() {
>     this.users= []
>     this.users();
> 

>   methods: {

>     getUsers: function() {
>       axios
>         .get(Config.URL +"users", {
>         })
>         .then(response => {
>           this.users= response.data.payload;
>           this.users= this.groups.length;
>         })
>         .catch(e => {
>           this.errors.push(e);
>         });
>     },

这是我的VueTables.vue:

<template>
  <vuetable ref="vuetable"
  :fields="fields"> 
  ></vuetable>
</template>

<script>

import Vuetable from 'vuetable-2/src/components/Vuetable'

export default ({
    components: {
    Vuetable    
    },
    props: ['users'],
   data() {
        return {
           fields: [
        'this.users.username', 'this.users.email']
    } 
        },
        mounted: function(){
            console.log("Users in Table")
            console.log(JSON.stringify(this.users))
        }

那么,无论如何都要显示来自另一个vue组件的已经获取的数据,或者我是否每次都要在相同的vue-tables-2组件中获取数据?

0 个答案:

没有答案