Vue.js 在vue中同时使用缩写和全名时，如何按缩写排序

我正在尝试创建一个排序功能，用户将单击美国地图上的不同州，当他们单击该州时，将显示该州的城市列表 显示属于该状态

例如，我有一个all按钮，显示美国的所有城市，但是如果他们点击不同的州，那么这些城市需要向下过滤到 这些国家

我遇到的问题是，有些城市要么有州的全称，要么有州的缩写

我希望我的过滤器能够按全名和缩写进行排序

因此，如果我在地图上点击阿拉巴马州，就会显示出“AL”或“阿拉巴马”的城市

这是我的密码

全部的
{{state}}
名称
{{city.name}

导出默认值{
数据（）{
返回{
selectedState:'所有'，
元：{}，
州：['AL'，'CA'，'KS'，'OH']，
搜索：“”，
声明：“全部”，
城市：[]，
}
},
计算：{
州城市（）{
return（'All'==this.selectedState）？this.cities.filter（city=>{
city.state===this.selectedState
});
},
filteredCities（）{
返回（''==此.search）
这是纽约州
：this.stateCities.filter（city=>this.getSearchString（city）.indexOf（this.search.toLowerCase（））>-1）；
},
},
方法：{
getSearchString（城市）{
让string=city.name；
返回字符串.replace（'null'，''）.trim（）.toLowerCase（）；
},
州图像（州）{
返回“/states/image_“+state+”.jpg”；
},
所有城市（）{
get（'/api/state/cities'）。然后（（响应）=>{
this.cities=response.data.cities；
})
}
},
安装的（）{
这个。所有城市（）；
}
}

目前，我在代码中只添加了4个状态

这是一个城市产出的例子

    cities: array(50)
        0: 
            name: Athens
            state: Alabama
        1: 
            name: Greenville
            state: AL

---

听起来您需要使您的

状态

值同时包含缩写和全名

比如说

数据：（）=>({
selectedState:null，
国家：[{
名称：“阿拉巴马州”，
缩写：“AL”
}, {
名称：“加利福尼亚”，
缩写：“CA”
}, {
名称：“堪萨斯州”，
缩写：“KS”
}, {
姓名：“俄亥俄州”，
缩写：“哦”
}],
搜索：“”，
城市：[]，
})

在模板中，将这些对象值绑定到

selectedState

全部
听起来您需要使您的
状态
值同时包含缩写和全名

比如说

数据：（）=>({
selectedState:null，
国家：[{
名称：“阿拉巴马州”，
缩写：“AL”
}, {
名称：“加利福尼亚”，
缩写：“CA”
}, {
名称：“堪萨斯州”，
缩写：“KS”
}, {
姓名：“俄亥俄州”，
缩写：“哦”
}],
搜索：“”，
城市：[]，
})

在模板中，将这些对象值绑定到
selectedState

全部
另外，
mounted
不应出现在
方法
对象中。此外，
mounted
不应出现在
方法
对象中