在模板中使用 v-for (Vue-Tables-2)

Question

我想在我的数据表中显示 axios 数据，因为它们有一个动态键我想创建一个模板

数据集： "environment": "production", "version": "5.6", "apache_version": "3.2.1"

我的Vue.js：

    new Vue({
    el: "#info",
    mounted() {
        this.getInfo()
    },
    methods: {
        getInfo() {
            axios
            .get("http://localhost:8080/info")
            .then(response => {
                this.info = response.data
            })
        },
    },
    data: {
        selectedRow: [],
        columns: ['name','value'],
        rows : [],
        options: {
            headings: {
                name: 'Info',
                value: 'Value'
            },
            sortable: ['name','value'],
            filterByColumn: true,
        },
    },
});

我的 HTML :

<div id="info" v-cloack>
    <v-client-table :data="rows" :columns="columns" :options="options">
        <template slot="name" scope="props">
            <div v-for="(value, name) in info">
                <p>{{ props.rows.name }}</p>
            </div>
        </template>
        <template slot="value" scope="props">
            <div v-for="(value, name) in info">
                <p>{{ props.rows.value }}</p>
            </div>
        </template>
    </v-client-table>
</div>

为了在名称栏中显示：环境，版本，apache_version
并在值列中显示：production, 5.6 , 3.2.1

谢谢！

Answer 1

这个里面的axios没有权限访问你应该做的组件如下：

 new Vue({
    el: "#info",
    mounted() {
        this.getInfo()
    },
    methods: {
        getInfo() {
            let vm = this;
            axios
            .get("http://localhost:8080/info")
            .then(response => {
                vm.info = response.data
            })
        },
    },
    data: {
        selectedRow: [],
        columns: ['name','value'],
        rows : [],
        info: [],
        options: {
            headings: {
                name: 'Info',
                value: 'Value'
            },
            sortable: ['name','value'],
            filterByColumn: true,
        },
    },
    computed: {
        formattedColumns() {
            let columns = [];
            for (const key in this.info) {
                let column = {};
                column.name = key;
                column.value = this.info[key];
                columns.push(column);
            }
            return columns;
        }
    }
});

这个计算属性 returns 是这样的：

[{name: "environment", value: "production"},{name: "version", value: "5.6"..}]

您一定可以根据自己的喜好和需要进行更改

Answer 2

感谢 Girl Codes 帮助我使用动态键显示 vue-tables-2 数据，您必须在 vue.js 中添加此属性 :

el: "#info",
mounted() {
    this.getInfo()  
},
methods: {
    getInfo() {
        axios
        .get("http://localhost:8080/info")
        .then(response => {
            this.rows = response.data
        })
    },
},
data: {
    columns: ['name','value'],
    options: {
        headings: {
            name: 'Info',
            value: 'Value'
        },
        sortable: ['name','value'],
        filterByColumn: true,
    },
},
computed: {
    formattedRows() {
        let rows = [];
        for (const key in this.rows) {
            let row = {};
            row.name = key;
            row.value = this.rows[key];
            rows.push(row);
        }
        return rows;
    }
}

在模板中使用 v-for (Vue-Tables-2)

Use v-for in Templates (Vue-Tables-2)

templates

vue.js

axios

vue-tables-2