[Vuejs]-Use v-for in Templates (Vue-Tables-2)

by

0👍

✅

This inside axios does not have access to the component you should do as follows:

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

This computed property returns something like this :

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

You can sure change it to your liking and to what is needed

0👍

Thanks to Girl Codes for helping me to display with vue-tables-2 data with a dynamic key you must add this property in 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;
    }
}

Leave a comment