我创建了一个管理面板,以查看有关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组件中获取数据?