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.
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>
- [Vuejs]-Vue.js and data storing in text/script files
- [Vuejs]-How to validate Dynamic input in vuejs / Laravel
Source:stackexchange.com