Do the sorting within AcceptedSessionsList

This commit is contained in:
Oliver Davies 2019-08-30 13:56:07 +01:00
parent 15e921239e
commit a39497e8d4
2 changed files with 11 additions and 11 deletions

View file

@ -1,14 +1,13 @@
<template> <template>
<div id="app" class="antialiased min-h-screen font-sans bg-gray-100 text-black p-12"> <div id="app" class="antialiased min-h-screen font-sans bg-gray-100 text-black p-12">
<div class="w-full max-w-2xl mx-auto"> <div class="w-full max-w-2xl mx-auto">
<accepted-sessions-list :sessions="sortedSessions" /> <accepted-sessions-list :sessions="sessions" />
<session-form @submitted="addSession($event)" /> <session-form @submitted="addSession($event)" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import _ from 'lodash'
import qs from 'qs' import qs from 'qs'
import AcceptedSessionsList from '@/components/AcceptedSessionsList' import AcceptedSessionsList from '@/components/AcceptedSessionsList'
import SessionForm from '@/components/SessionForm' import SessionForm from '@/components/SessionForm'
@ -47,13 +46,6 @@ export default {
addSession: function (session) { addSession: function (session) {
this.sessions.push(session) this.sessions.push(session)
} }
},
computed: {
sortedSessions: function () {
return _(this.sessions).sortBy(({ attributes }) => attributes.title)
.value()
}
} }
} }
</script> </script>

View file

@ -4,7 +4,7 @@
<div v-if="sessions.length" class="bg-white p-6 rounded-lg border"> <div v-if="sessions.length" class="bg-white p-6 rounded-lg border">
<ul class="-mb-3"> <ul class="-mb-3">
<li v-for="{ attributes } in sessions" :key="attributes.drupal_internal__nid" class="mb-3"> <li v-for="{ attributes } in sortedSessions" :key="attributes.drupal_internal__nid" class="mb-3">
{{ attributes.title }} {{ attributes.title }}
</li> </li>
</ul> </ul>
@ -13,12 +13,20 @@
</template> </template>
<script> <script>
import sortBy from 'lodash/sortBy'
export default { export default {
props: { props: {
sessions: { sessions: {
type: Object, type: Array,
required: true required: true
} }
},
computed: {
sortedSessions: function () {
return sortBy(this.sessions, 'attributes.title')
}
} }
} }
</script> </script>