如何让v-for按特定的顺序, 输出对象数组?

我有一个对象数组:{2:'李四',1:'张三',3:'王五'},想按这个顺序输出。
用v-for遍历的话,会根据ASCII顺序,输出:{1:'张三',2:'李四',3:'王五'}

我只想到增加索引,来实现功能。{1: {2:李四},2: {1:张三} ,3: {3:王五} }

但这样需要改不少代码。
请问有没有更优雅的方式,修改v-for的渲染顺序?
(以上查了文档、百度未找到方案)

只能自定义过滤器么?但过滤器相当于跟特定数组顺序绑定。无法解耦。
还望指教!


16分钟后更新

我想了一下:可不可以封装一个过滤器函数。
每次把“固定的对象数组”作为参数传进去,然后这个函数,通过pop,shift啥的,返回想要的结果。
这样就可以重用了。虽说写函数麻烦,但以后就方便了。


【 本贴已经解决,正解是我下面的答案。】

感谢上边两位朋友的指教。


慕桂英546537
浏览 3826回答 2
2回答

哆啦的时光机

这个做不到,至少我做不到。对象中是没有顺序的,所以在访问的时候一定会按照ASCII去访问key。你可以考虑在定义的时候就按照数组定义:[{2:'李四'}, {1:'张三'}, {3:'王五'}]数组是按照顺序访问的。

慕慕森

感谢楼上2位的指教。我今天试了下,最终正确的写法是这样:[     {id:2,username:'李四'},      {id:1,username:'张三'},      {id:3,username:'王五'} ]这样才能在v-for里边用list.键名输出值!v-for="(value,key,index) in list然后用{{value.username}}取到值!
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Vue.js