Aetrox
107
7
Vue

dynamic table

Posted 9 months ago by Aetrox

Hello,

i build a little data-table to output different data with one vue-component. the problem is, the object keys are not the same for each table. There are always 2 columns but it can be "ID, Name" or "Extension, Name".

I tried for 2 days but couldnt find a solution to use prop-values as object keys in v-for. this is what it actually looks:

<template>
    <div style="overflow: auto; height: 500px;">
        <table class="table">
            <thead>
                <tr><th class="w-25" v-for="field in fields">{{field}}</th></tr>
            </thead>
            <tbody>
                <tr v-for="item in data"><td class="w-25">{{item.id}}</td><td>{{item.id}}   </td></tr>
            </tbody>
        </table>
    </div>
</template>

<script>

export default {
    props: ['data','fields']
}


</script>

I would need something like item.field[0] and item field[1], but i didnt knew how to get this working. Is it possible or has someone a hint how to get this working?

Thanks in Advance.

Simon

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.