Javascript 单击按钮时，在Vue.js中按名称排序列表

我在玩Vue.js，在单击按钮时，我很难弄清楚如何对列表进行排序

实际上，我确实成功地使用orderedBeers方法对列表进行了排序；当我点击按钮时，我可以在inspector中看到有序列表，但我无法更改HTML中的数据

感谢您的推荐。先谢谢你

{{value.name}
{{value.tagline}
格式
{{value.abv}}}%
点击我！
从“mdbvue”导入{mdbView，mdbMask}；
从“/fade transition.vue”导入FadeTransition；
导出默认值{
姓名：“家”，
组成部分：{
MDB视图，
mdbMask，
衰减转换
},
数据（）{
返回{
项目：[]，
当前页面：1，
};
},
计算：{
//展示更多更少的产品
托比肖恩{
返回此.items.slice（0，this.currentPage*5）；
},
总页数（）{
返回Math.ceil（this.items.length/4）；
},
},
安装的（）{
这是fetchData（）；
},
方法：{
fetchData:function（）{
const myRequest=新请求（“https://api.punkapi.com/v2/beers");
获取（myRequest）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
此项=数据；
console.log（this.items）；
})
.catch（错误=>{
console.log（错误）；
});
},
getMissingImg（索引）{
返回这个.images[index]；
},
下一页（）{
如果（this.currentPage

---

你就快到了。您只需要使用另一个计算属性对列表进行排序，并在

v-for

中使用该属性

将模板修改为：

<figure v-for="(value,index) in toBeShownOrdered" id="page-wrap" :key="index" >

<button @click="orderByName = !orderByName">Click Me!</button>

---

另请参见此处：

您就快到了。您只需要使用另一个计算属性对列表进行排序，并在

v-for

中使用该属性

将模板修改为：

<figure v-for="(value,index) in toBeShownOrdered" id="page-wrap" :key="index" >

<button @click="orderByName = !orderByName">Click Me!</button>

---

另请参见此处：

您的数据源是计算属性

toBeShown

。如果您希望数据按排序显示，则必须返回该值

在

orderedBeers

中，您正在对

toBeShown

返回的

项目进行排序，此时您应该更改
toBeShown
以使用排序后的数据本身

更改
orderedBeers
以更新
数据。项目
以反映新的订单：

orderedBeers: function () {
  this.data.items = _.orderBy(this.data.items, 'name', 'asc')
}

这将对整个项目列表进行排序，而不仅仅是当前显示的页面

或

使用排序标志并将排序登录移动到
toBeShown

data() {
 return {
  items: [],
  currentPage: 1,
  sorted: false
 }
}
...
orderedBeers: function () {
  this.sorted = true
}
...
toBeShown() {
    return this.sorted ? _.orderBy(this.data.items, 'name', 'asc').slice( 0, this.currentPage) : this.items.slice(0, this.currentPage * 5);
}

这也将对所有项目进行排序，但可以稍微更改代码，使其仅对当前显示的页面进行排序

toBeShown() {
    let items = this.items.slice(0, this.currentPage * 5)
    return this.sorted ? _.orderBy(items, 'name', 'asc') : items
}

您的数据源是计算属性
toBeShown
。如果您希望数据按排序显示，则必须返回该值

在
orderedBeers
中，您正在对
toBeShown
返回的
项目进行排序，此时您应该更改
toBeShown
以使用排序后的数据本身

更改
orderedBeers
以更新
数据。项目
以反映新的订单：

orderedBeers: function () {
  this.data.items = _.orderBy(this.data.items, 'name', 'asc')
}

这将对整个项目列表进行排序，而不仅仅是当前显示的页面

或

使用排序标志并将排序登录移动到
toBeShown

data() {
 return {
  items: [],
  currentPage: 1,
  sorted: false
 }
}
...
orderedBeers: function () {
  this.sorted = true
}
...
toBeShown() {
    return this.sorted ? _.orderBy(this.data.items, 'name', 'asc').slice( 0, this.currentPage) : this.items.slice(0, this.currentPage * 5);
}

这也将对所有项目进行排序，但可以稍微更改代码，使其仅对当前显示的页面进行排序

toBeShown() {
    let items = this.items.slice(0, this.currentPage * 5)
    return this.sorted ? _.orderBy(items, 'name', 'asc') : items
}