0

I create a admin panel to see some informations about users and groups in vue2.js.

In my overview.vue page i collect all the data from the backend with axios.get requests. Now i try to pass these data from my overview.vue to all my tables which i create with vue-tables-2. I tried so with props in my VueTables.vue, passing them with my tag from my overview.vue to the VueTables.vue.

In my VueTables.vue i collect the JSON-like data, but i have no idea how to use them inside my vueTables, cause im not able to link them to my "fields" field. If i use it like 

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

i get a reference error, that field isnt defined. If i try it this way

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

It simply displays "this.users.username" as Headers but no more data.

Here a snipped of my overview.vue:

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

And here is my 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))
        }

So, is there anyway to display already fetched data from another vue-component or do i have to fetch the data in the same vue-tables-2 component every time again?

Alex
  • 132
  • 1
  • 4
  • 21
  • `` – connexo Jan 10 '18 at 19:25
  • i already ensured the data is enable trough a boolean, sorry i forgot to write this in the snipped. The error i receive if i try it with " return { fields: [ 'this.users.username', 'this.users.email']" is: "TypeError: field is undefined Stack trace: ...." – Alex Jan 10 '18 at 19:51
  • Where are you binding and passing your `users` prop to your VueTables.vue component? – skribe Jan 11 '18 at 06:38
  • In the first line of the overview.vue snipped: . Its inside the Template element, just not displayed in a snipped because i removed unneccessary stuff, sorry I can access the users-Object with, e.g. console.log(this.users) within my vuetables. But i simply have no idea how i can pass the json-like object "users" to be processed with my vuetables – Alex Jan 11 '18 at 16:25

0 Answers0