Splitting data into rows and columns in VueJS

Question

I have some data and I am trying to figure out how I can display it in table format in rows and columns in Vue Js. The display should be as shown:

this is my code but only displays in one column only but need to split the data into rows and columns

<table>
<tbody> 
  <tr v-for="product in products">
        <td>{{product.item_name}}</td>
   </tr>
  </tbody>
</table>

This is my code but only displays as one column <table> <tbody> <tr v-for="product in products"> <td>{{product.item_name}}</td> </tr> </tbody> </table> — Hotdot Cyber
– Hotdot Cyber, Commented Dec 29, 2019 at 11:34
OK. So split your array into subarrays. Then loop through the sub array. Each sub-array will be a row. Each element will be a cell. — JB Nizet
– JB Nizet, Commented Dec 29, 2019 at 11:45

T. Short · Accepted Answer · 2019-12-29 13:07:35Z

1

Using this function you can sort the initial array to be in three sections: (Make it a vue method).

function sortList(list, rows) {
    const sortedList = [];

    let rowIndex = 0;

    for (i = 0; i < rows; i++) {
        sortedList[i] = [];
    }

    list.forEach(item => {
        sortedList[rowIndex++].push(item);

        if ((rowIndex + 1) === rows) {
            rowIndex = 0;
        }
    });

    return sortedList;
}

Then you can set:

this.products = this.sortList(list, 3);

list being the initial array and 3 being the number of rows you want.

Then in the template you can do:

<table>
    <tbody> 
        <tr v-for="row in products">
            <td v-for="item in row">{{ item.item_name }}</td>
        </tr>
    </tbody>
</table>

answered Dec 29, 2019 at 13:07

T. Short

3,62417 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Splitting data into rows and columns in VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related