I am seeking a solution involving displaying a JavaScript object in a paged format. For instance, given the sample object below, I aim to present it as pages based on the value stored in the perPage variable.
{
"fruits":[
{
"from":"Shanghai",
"to":"Houston",
"createdOn":"2019-02-20 17:02:45",
"threadId":"1234564534"
},
{
"from":"Mumbai",
"to":"Texas",
"createdOn":"2019-02-22 17:02:45",
"threadId":"223455678"
}
],
"vegetables":[{
"from":"Barcelona",
"to":"Milan",
"createdOn":"2019-01-20 10:02:45",
"threadId":"45673456"
}],
...
If perPage is set to 5, the display should look like this:
<div class="page">
fruits
vegetables
...
</div>
<div class="page">
...
</div>
In case perPage is adjusted to 2, there will be three divs with the class page. The first div will show fruits and vegetables, the second will feature paper and books, while the third will display toys and electronics.
I have devised a basic Vue.js code for this purpose, but it encountered issues under certain circumstances. Could someone take a look at this and identify where it went wrong?
<div class="wrapper">
<div v-for="(eachWidget, widgetName, index) in widgetData">
<div v-bind:class="((index != 0) && ((index%perPage) == 0))?'page':''" >
<div class="widget">
<p>{{ widgetName}}</p>
<p class="card" v-for="(eachItem, index) in eachWidget">{{eachItem.from}}</p>
</div>
</div>