vue.js - 如何按字母顺序对 Vue.js / Buefy 形式的选项列表进行排序?
问题描述
目前,我使用 Vue.js / Buefy 表单显示每个城市的酒店列表:
<option
:value="h['@attributes'].Name"
v-for="h in cities[form.cities[i].index].Hotels.Hotel"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h['@attributes'].Name"></option>
我应该添加什么来按字母顺序对它们进行排序?我不知所措,因为我不太了解 Vue / Buefy,而且我正在修改其他人编写的代码。
谢谢!
解决方案
了解您的代码在做什么很重要,这样您就知道需要在哪里进行更改。您的循环v-for
正在遍历您的数组cities[form.cities[i].index].Hotels.Hotel
(命名对我来说似乎很奇怪)。
在这个数组中,有一个 key@attributes
包含一个带有 key 的对象Name
,这可能是您想要用于排序的对象。
通常我会为这些东西使用计算属性,但由于你有基于参数 ( form.cities[i].index
) 的数组,我不确定它是否会如此容易地工作。因此,您可以使用一种方法来获取数组的排序版本。在您的 Vue 实例中,将以下内容添加到“方法”属性中:
methods: {
sortedHotels: function(hotels) {
tmp = this.hotels.slice(0);
tmp.sort(function(a,b) {
return (a['@attributes'].Name > b['@attributes'].Name) ? 1 : ((b['@attributes'].Name> a['@attributes'].Name) ? -1 : 0);
});
return tmp;
},
},
然后,不是循环遍历普通数组,而是遍历该数组的函数调用的结果:
<option
:value="h['@attributes'].Name"
v-for="h in sortedHotels(cities[form.cities[i].index].Hotels.Hotel)"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h['@attributes'].Name"></option>
推荐阅读
- asp.net-mvc - 错误:值不能为空。参数名称:来源
- python - 从python中的模块导入类
- azure - 从 Visual Studio 发布到 Azure 虚拟机
- python - 在不关闭 GUI 窗口的情况下停止线程
- laravel - 有一种方法可以自动将模型注入 laravel 中的控制器,而无需使用 Illuminate\Http\Request?
- python-3.x - 如何将按钮输入为整数
- swift - 复杂的自定义导航 SwiftUI
- android - 如何使用 Retrofit2 和 GSON 从响应中获取特定的 JSON 数组?
- node.js - 使用node js读取和操作一个TS文件
- cordova - SVG模糊过滤器在iOS wkwebview上不起作用