1

我有一个需要以分页格式显示的 javascript 对象。例如，从下面的对象中，我需要根据perPage变量的值将其显示为页面。

{
   "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"
   }],
   "paper":[{
     "from":"Kualalumpur",
     "to":"Singapore",
     "createdOn":"2019-02-01 12:02:45",
     "threadId":"234222345"
   },
   {
     "from":"Singapore",
     "to":"Vancover",
     "createdOn":"2019-01-20 11:02:45",
     "threadId":"6756434343"
   }],
   "books":[{
     "from":"Jibooty",
     "to":"Ahmedabad",
     "createdOn":"2019-02-10 17:02:45",
     "threadId":"23456789"
   }],
   "toys":[{
     "from":"Shanghai",
     "to":"Houston",
     "createdOn":"2019-02-20 14:02:45",
     "threadId":"123434343"
   }],
   "electronics":[{
     "from":"Somalia",
     "to":"Angora",
     "createdOn":"2019-02-20 17:02:45",
     "threadId":"667676767"
   }]
 }

如果 的值为perPage5，则应如下所示

<div class="page"> 
  fruits
  vegetables
  paper
  books
  toys
</div>
<div class="page">
  electronics
</div>

如果 的值为perPage2，则 class 将有 3 个 div page。fruits and vegetables将显示在第一个div，paper and books将显示在第二个div，toys and electronics将显示在第三个div。

我已经在 vue js 中为此准备了一个基本代码，但在某些情况下它失败了。有人可以看看这个，让我知道哪里出错了吗？

  <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>

4

1 回答 1

1

起初我根据长度和数量计算pages计数。之后，对于我列出并签入的每个页面：itemsperpageitemsindexitemv-if

new Vue({
    el: "#app",
    data: {
        perpage: 5,
        items: {
            "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"
            }],
            "paper": [{
                "from": "Kualalumpur",
                "to": "Singapore",
                "createdOn": "2019-02-01 12:02:45",
                "threadId": "234222345"
            }, {
                "from": "Singapore",
                "to": "Vancover",
                "createdOn": "2019-01-20 11:02:45",
                "threadId": "6756434343"
            }],
            "books": [{
                "from": "Jibooty",
                "to": "Ahmedabad",
                "createdOn": "2019-02-10 17:02:45",
                "threadId": "23456789"
            }],
            "toys": [{
                "from": "Shanghai",
                "to": "Houston",
                "createdOn": "2019-02-20 14:02:45",
                "threadId": "123434343"
            }],
            "electronics": [{
                "from": "Somalia",
                "to": "Angora",
                "createdOn": "2019-02-20 17:02:45",
                "threadId": "667676767"
            }]
        }
    },
    computed: {
        length() {
            return Object.keys(this.items).length
        },
        pages() {
            return Math.ceil(this.length / this.perpage)
        }
    }
})

// just to silent vue
Vue.config.productionTip = false;
Vue.config.devtools=false;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label>per page:</label>
  <input type="number" v-model="perpage" min="1" :max="length">
  
  <ul v-for="n in pages">
    <li v-for="(item, title, index) in items"
    v-if="index >= perpage * (n-1)  && index < perpage * n">
      {{ title }}
    </li>
  </ul>
  
</div>

希望有所帮助

于 2019-02-28T10:06:25.303 回答