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

Posted 2023-02-23

【中文标题】在模板中使用 v-for (Vue-Tables-2)

【英文标题】：Use v-for in Templates (Vue-Tables-2)

【发布时间】：2021-07-16 12:16:40

【问题描述】：

我想在我的数据表中显示 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 并在值列显示：生产、5.6、3.2.1

谢谢！

【问题讨论】：

能不能配合一下，到底是什么问题，有什么错误，怎么回事？

我的回复中有我的数据，但是当我想在表格中打印时写的是“无匹配记录”

是的，你能给我们看一个数据样本吗，你没有在任何地方设置列

它是数据的一部分： "environment": "production", "version": "5.6", "apache_version": "3.2.1", "apt_dist_updates": 328, "apt_has_dist_updates": false, "apt_has_updates": true 键总是不同的，所以我对列的声明有疑问

您可以创建一个计算属性，该属性循环您的数据并通过循环您对象中每个属性的键和值来返回列。我会为您编写它，但要确定您需要列的正确格式，这取决于您拥有的组件以及它如何获取数据。如果你有一个不同的简单工作示例，我可能会提供帮助

【参考方案1】：

感谢 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;
    

【讨论】：

在 html 中：<div id="info" v-cloack> <v-client-table :data="formattedRows" :columns="columns" :options="options"> </v-client-table> </div>

【参考方案2】：

这个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;
        
    
);

此计算属性返回如下内容：

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

您可以根据自己的喜好和需要更改它

【讨论】：

我在回复中获得了数据，但在表格中显示“没有匹配的记录”

它可以工作，但是我弄错了应该获取数据的不是列而是行，因为它是包含要显示的数据的行，非常感谢您的帮助！