如何排序li的反向

我想排序反向（vueJS 2.x）中的无序列表，但我似乎无法找到任何有关过滤器的文档，像曾经在vue 1.x（类似的方式角1做到了）如何排序li的反向

如：

<li v-for="message in messages | orderBy 'name' -1">

但不工作了。

我在这里使用计算属性的尝试：这排序的作品，但在清单项目不留逆转一次新的消息通过表单提交的页面上

computed: { 
    reverse: function() { 
    return this.messages.reverse(); 
    } 
}

。

目标是始终保持列表项目颠倒。

我试着将反向函数附加到其他生命周期钩子以及如beforeCreate和更新但似乎没有工作。我错过了什么？

来源

2017-01-20 Snuglas

你需要在代码或用户界面中订购的物品？ – Buffalo

我想只是看法需要颠倒。消息数据正从Firebase中提取 – Snuglas

事实上过滤器都不见了在Vuejs 2 ......相反，你使用computed properties因为你曾尝试：

<li v-for="message in sortedMessages">

然后：

computed: { 
    sortedMessages: function() { 
    return this.messages.slice().sort(function(message1, message2) { 
     var name1 = message1.name.toLowerCase(); 
     var name2 = message2.name.toLowerCase(); 
     if(name1 < name2) return 1; 
     if(name1 > name1) return -1; 
     return 0; 
    }) 
    } 
}

希望这有助于！

来源

2017-01-20 21:09:55 MacPrawn

由于'.sort（）'具有破坏性，因此会以无限循环结束。尽管使用'this.messages.slice（）。sort（...）'可以轻松解决这个问题。 –

好点 - 谢谢你指出。我修改了我的答案。 – MacPrawn

在vueJS 2.x的文档，there is a note on replacing the orderBy filter的迁移部分，

因为它提到你就应该能够使用像lodash's排序依据的功能，如：

<li v-for="message in Orderedmessages"> 

computed: { 
    Orderedmessages: function() { 
    return _.orderBy(this.messages, ['name'], ['desc']) 
    }

来源

2017-01-20 21:10:39 Gerrat

如果你只需要在UI中对列表进行排序，然后使用CSS，而不再需要在模型中对其进行排序。

一个垂直列表：

ul{ 
    display: flex; 
    flex-direction: column-reverse; 
}

的水平列表：

ul{ 
    display: flex; 
    flex-direction: row-reverse; 
}

来源

2017-01-20 21:51:47 Buffalo

这带来了很多副作用。屏幕阅读器仍然会按照DOM顺序读取它。此外，你将无法创建一个好的测试来查看事情是否真的被颠倒过来。 –

你必须在这里小心，因为Array.reverse是破坏性的，会导致无限循环。当您尝试使用Array.sort时，您也会遇到同样的情况。你可以做到这一点，而不是你有什么，因为你会用一个副本：

computed: { 
    reverse: function() { 
    return this.messages.slice().reverse() 
    }, 
},

来源

2017-01-21 02:22:46

如何排序li的反向

回答

相关问题