[Vuejs]-Vuetify 2 – 10 showing up in pagination options even though set a new array

0πŸ‘

It is because you only have 10 items. I made a pen to show you it works fine with smaller numbers. Run code snippet in expanded view.

here is a pen

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      search: "",
      name: "",
      calories: "",
      fat: "",
      carbs: "",
      desserts: [{
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23
        },
        {
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67
        },
        {
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49
        },
        {
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94
        },
        {
          name: "Lollipop",
          calories: 392,
          fat: 0.2,
          carbs: 98
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          carbs: 87
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          carbs: 51
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65
        }
      ]
    };
  },
  computed: {
    headers() {
      return [{
          text: "Dessert (100g serving)",
          align: "left",
          sortable: false,
          value: "name",
          filter: f => {
            return (f + '').toLowerCase().includes(this['name'].toLowerCase())
          }
        },
        {
          text: "Calories",
          value: "calories",
          filter: value => {
            if (!this.calories) return true;
            return value < parseInt(this.calories);
          }
        },
        {
          text: "Fat (g)",
          value: "fat",
          filter: value => {
            if (!this.fat) return true;
            return value < parseInt(this.fat);
          }
        },
        {
          text: "Carbs (g)",
          value: "carbs",
          filter: value => {
            if (!this.carbs) return true;
            return value == parseInt(this.carbs);
          }
        }
      ];
    }
  }
});
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.0-alpha.18/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.0-alpha.18/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <template>
      <div>
        <v-data-table
        :headers="headers"
        item-key="name"
        :items="desserts"
        :footer-props="{'items-per-page-options': [ 4, 8, 10]}"
      ></v-data-table>
      </div>
    </template>
  </v-app>
</div>

Leave a comment