Sortout Code

How to show data in a table dynamically in VueJS?

July 02, 2022

Hi Friends đź‘‹,

Welcome To SortoutCode! ❤️

To show data in the table dynamically in vueJS, we are using the v-for directive to show data in the table dynamically, And render a list of items based on an array.

Today I am going to show you How you show data in a table dynamically in VueJS.

Table of contains

  • Define tableData property for Test
  • Using vueJS v-for directive

Let’s start today’s tutorial How do I show data in a table dynamically in VueJS?

Define tableData property for Test

Let’s define the tableData in the data of the FirstComponent.vue component for testing purposes.

FirstComponent.vue

<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            tableData:[
            {id:1,sitename:"Infinitbility",site_url:"https://infinitbility.com/",status:1},
            {id:2,sitename:"SortOutCode",site_url:"https://sortoutcode.com/",status:1},
            {id:3,sitename:"Aguidehub",site_url:"https://aguidehub.com/",status:1},
            {id:4,sitename:"Test",site_url:"https://test.com/",status:0},
            ]
        }
    },
}
</script>

Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been described in the function.

we define the tableData you can see that.

Using vueJS v-for loop

We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of data in tableData, where tableData is the source data array and data is an alias for the array element being iterated on.

Let’s see the example:

FirstComponent.vue

<template>
    <div>
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Site Name</th>
                    <th scope="col">Site URL</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="data in tableData" :key="data.id">
                    <th scope="row">{{data.id}}</th>
                    <td>{{data.sitename}}</td>
                    <td>{{data.site_url}}</td>
                    <td v-if="data.status === 1">Active</td>
                    <td v-else-if="data.status === 0">Inactive</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            tableData:[
            {id:1,sitename:"Infinitbility",site_url:"https://infinitbility.com/",status:1},
            {id:2,sitename:"SortOutCode",site_url:"https://sortoutcode.com/",status:1},
            {id:3,sitename:"Aguidehub",site_url:"https://aguidehub.com/",status:1},
            {id:4,sitename:"Test",site_url:"https://test.com/",status:0},
            ]
        }
    },
}
</script>

Let’s check the output of the dynamic table example.

Output

Table Example

All the best đź‘Ť.

Follow me on Twitter