Aetrox
12
7
Vue

dynamic table

Posted 4 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.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.