Javascript 单击按钮排序vuetify简单表格

我试图在单击按钮的简单vuetify表上对卡路里列进行排序。下面是我正在尝试的代码，但它没有按预期工作

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
甜点：[
{
名称：“冷冻酸奶”，
卡路里：159，
},
{
名称：“冰淇淋三明治”，
卡路里：237，
},
{
名称：“Eclair”，
卡路里：262，
},
{
名字：“纸杯蛋糕”，
卡路里：305，
},
{
名称：“姜饼”，
卡路里：356，
},
{
名称：“果冻豆”，
卡路里：375，
},
{
名称：“棒棒糖”，
卡路里：392，
},
{
名称：“蜂巢”，
卡路里：408，
},
{
名称：“甜甜圈”，
卡路里：452，
},
{
名称：“KitKat”，
卡路里：518，
},
],
}
},
方法：{
sortCalories（）{
这个。甜点。分类（（a，b）=>{
if（索引的类型）！==‘未定义’）{
如果（！isDesc[0]）{
返回a[index].toLowerCase（）.localeCompare（b[index].toLowerCase（））；
}
否则{
返回b[index].toLowerCase（）.localeCompare（a[index].toLowerCase（））；
}
}
});
把这个还给我。甜点；
}
}
})

分类
名称
卡路里
{{item.name}
{{item.carries}}

很难在v-simple-table上实现排序，因为没有预构建的道具来支持排序。但是，您可以使用

组件完全执行相同的操作。有一个示例演示了如何使用

sortby

和

sortdesc

道具实现v数据表的外部排序

以下示例显示了如何实现“卡路里”列的外部排序：

按卡路里排序！

//脚本
数据（）{
返回{
脏话：“卡路里”，
sortDesc:错误，
标题：[
{文本：“名称”，值：“名称”，}，
{文本：“卡路里”，值：“卡路里”}，
],
甜点：[……]
}
},
方法：{
sortCalories（）{
this.sortDesc=！this.sortDesc；
}
}

这里有一个演示示例

---

如果您只使用

然后通过一个外部按钮通过

道具来控制它的
排序，不是更容易吗？应该试试这个选项，但是有没有办法隐藏分页和搜索？我相信你可以。我还没有检查，但我想你可以使用
禁用分页
的
属性@blackraspberryyyy是的，我们可以使用这些属性来隐藏它们
：hide default footer=“true”
但是排序不适用于按钮单击，就像单击按钮一样，它不会触发列排序。有什么想法吗？嘿，谢谢你。事实上，我是在早上根据你的建议解决的。而且它绝对工作得很好。谢谢你的想法。