-
Hello everyone, I'm working on modifying the Real-time Notes App that uses Firebase and I've ran into a problem. The problem I'm currently stuck on is sorting my list of notes by category. I have multiple notes in a single category so v-for returns the assigned note category multiples times in the list. I understand that I should use a computed property to filter the list, but I've experimented with the one below, sortedCategories, and can't seem to get it working. Perhaps also relevant, I'm using Vue2 filters to sort the list alphabetically currently. After I get the list working without duplicates the next step is to be able click on the category and pull up all the notes in that particular category. Thanks for any assistance! My code is: ``` <template> <div class="notebook"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> </div> </nav> <ul> <!-- <li v-for="(page, index) of pages" class="page" v-bind:class="{ 'active': index === activePage }" @click="changePage(index)" v-bind:key="index"> <div>{{page.category}}</div> </li> --> <li v-for="(page, index) of orderBy(pages, 'category')" class="page" v-bind:class="{ 'active': index === activePage }" v-bind:key="index"> <div>{{ page.category }}</div> </li> <li class="new-page">Add Page +</li> </ul> </div> </template> <script> import Vue from 'vue' import Vue2Filters from 'vue2-filters' Vue.use(Vue2Filters) export default { name: 'Notebook', props: ['pages', 'activePage'], mixins: [Vue2Filters.mixin], computed: { sortedCategories() { return this.pages.filter(function(category, position) { return this.pages.indexOf(category) == position; }); } }, methods: { changePage (index) { this.$emit('change-page', index) }, newPage () { this.$emit('new-page') }, } } </script> <style scoped> .notebook { overflow-x: hidden; max-width: 20rem; width: 30rem; background: d3d1d1; } .navbar { background-color: ; color: dcdcdc; position: sticky; top: 0; } ul { list-style-type: none; padding: 0; margin: 0; height: 100%; position: relative; } li { padding: 1rem; font-size: 1.25rem; min-height: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } li:hover { cursor: pointer; background-color: a3a3a3; } .active { background-color: ff; } .active:hover { background-color: cc1fa; } .new-page { background-color: ; color: white; bottom: 0; position: sticky; width: 100%; box-sizing: border-box; } .new-page:hover { background-color: ; } </style> ```
