0

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

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

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

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

我收到一个参考错误，该字段未定义。如果我这样尝试

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

它只是将“this.users.username”显示为标题，但没有更多数据。

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

这是我的 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-component 获取的数据，还是我必须每次都在同一个 vue-tables-2 组件中获取数据？

4

0 回答 0