Javascript 如何在VUE中反向显示阵列？

我有一个简单的数组，其中包含我不时推送新项目的项目。新项目通过ajax提供

items.push({id: 1, title: 'a'});
items.push({id: 2, title: 'b'});
items.push({id: 3, title: 'c'});
items.push({id: 4, title: 'd'});

最重要的是，我需要将它们反向显示，如：

4，d

3，c

2，b

1、a

问题是我不能使用

unshift

，因为我需要对项目进行

索引

，因为我需要与特定项目进行交互

因此，基本上我正在寻找一种方法来推送项目，但要像取消移动一样显示它们。实际上不是反向数组

newvue({
el:“#示例”，
数据：{
项目：[]
},
安装的（）{
this.items.push（{id:1，标题：'a'}）
this.items.push（{id:2，标题：'b'}）
this.items.push（{id:3，标题：'c'}）
this.items.push（{id:4，标题：'d'}）
}
})

{{index+1}}。{{item.id}，{{item.title}

newvue({
el:“#示例”，
数据：{
项目：[]
},
安装的（）{
this.items.push（{id:1，标题：'a'}）
this.items.push（{id:2，标题：'b'}）
this.items.push（{id:3，标题：'c'}）
this.items.push（{id:4，标题：'d'}）
}
})

{{index+1}}。{{item.id}，{{item.title}

只需使用一个

计算的

属性，就完成了。

reverse

方法将在适当的位置反转数组中的项，因此我使用

slice

方法创建了一个新的项

至于unshift，当您使用

push

方法时，更新顺序已经存在了，因此顺序就像反转原始数组一样简单，您不需要担心它

const-app=新的Vue({
el:“#应用程序”，
数据：{
项目：[]
},
计算：{
reversedArr（）{
返回此.items.slice（）.reverse（）
}
},
创建（）{
this.items.push（{id:1，标题：'a'}）
this.items.push（{id:2，标题：'b'}）
this.items.push（{id:3，标题：'c'}）
this.items.push（{id:4，标题：'d'}）
}
})

起初的

{{item}

颠倒的

{{item}

只需使用一个

计算的

属性，就完成了。

reverse

方法将在适当的位置反转数组中的项，因此我使用

slice

方法创建了一个新的项

至于unshift，当您使用

push

方法时，更新顺序已经存在了，因此顺序就像反转原始数组一样简单，您不需要担心它

const-app=新的Vue({
el:“#应用程序”，
数据：{
项目：[]
},
计算：{
reversedArr（）{
返回此.items.slice（）.reverse（）
}
},
创建（）{
this.items.push（{id:1，标题：'a'}）
this.items.push（{id:2，标题：'b'}）
this.items.push（{id:3，标题：'c'}）
this.items.push（{id:4，标题：'d'}）
}
})

起初的

{{item}

颠倒的

{{item}

我想，在推完值后，可以使用array.reverse或array.reduceRight来反转数组。使用reduceRight，您甚至可以将原始索引添加到对象中，使其作为属性可用。@user3492940我不需要实际反转它。我只需要在表中以相反的方式显示它。所以我可以想象您正在使用v-repeat指令。也许您可以在指令中调用array.reverse inline:。我不经常使用vue，但我可以想象这会奏效。我是vue的初学者，但我认为应该work@Deancoakley没有这样的

id

。我需要使用

索引

而不是在推送完值后，您可以使用array.reverse或array.reduceRight来反转数组。使用reduceRight，您甚至可以将原始索引添加到对象中，使其作为属性可用。@user3492940我不需要实际反转它。我只需要在表中以相反的方式显示它。所以我可以想象您正在使用v-repeat指令。也许您可以在指令中调用array.reverse inline:。我不经常使用vue，但我可以想象这会奏效。我是vue的初学者，但我认为应该work@Deancoakley没有这样的

id

。我需要使用

索引

而不是

[Vue warn]：在组件渲染函数中可能有一个无限的更新循环。

@Kin此代码段工作正常，因此您的错误一定是由您的代码输入错误引起的。您确定要调用的是

arr.reverse（）

而不是

this.reverse（）

？通过调用

items.reverse（）

内联，您可以变得更简单

注意

reverse（）

修改数组，因此首先需要使用

slice（）

复制数组，如@kevguy的回答中所述。否则，每当推送新项目时，您将得到意外的结果。

[Vue warn]：组件呈现函数中可能存在无限的更新循环。

@Kin此代码段正常工作，因此您的错误一定是由代码中的键入错误引起的。您确定要调用的是

arr.reverse（）

而不是

this.reverse（）

？通过调用

items.reverse（）

内联，您可以变得更简单

注意

reverse（）

修改数组，因此首先需要使用

slice（）

复制数组，如@kevguy的回答中所述。否则，无论何时推送新项目，都会得到意外的结果。