12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- <template>
- <section v-if="opened != null">
- <h2>{{ opened.title }}</h2>
- <p>{{ opened.body }}</p>
- <a
- href="#"
- @click="closePost()"
- @keydown.enter="closePost()"
- >
- close
- </a>
- </section>
- <ul v-else>
- <li
- v-for="post in posts"
- :key="post.id"
- >
- <h2>
- <a
- :href="'#post-'+post.id"
- @click="openPost(post)"
- @keydown.enter="openPost(post)"
- >
- {{ post.title }}
- </a>
- </h2>
- </li>
- </ul>
- </template>
- <script>
- import { mapState, mapActions } from 'vuex'
- export default {
- computed: mapState({
- opened: state => state.posts.opened,
- posts: state => state.posts.all
- }),
- created () {
- this.$store.dispatch('posts/getAllPosts')
- },
- methods: mapActions('posts', [
- 'openPost',
- 'closePost'
- ]),
- metaInfo () {
- return {
- title: this.opened !== null ? this.opened.title : 'home'
- }
- }
- }
- </script>
|