Как правильно офрмить код?

Question

[Ilya Loopashko]

Не могу разобраться как правильно доработаь код.

Проблемма в том что когда первый раз захожу на страничку, данные не загружаются, хотя в localStorage данные есть, Помогает только обновление странички через f5. Подскажите где я допустил ошибку, и как правильно офрмить код.

<template>
    <div v-if="loading">Loading...</div>
    <post-list :posts="posts"/>
</template>

<script>

import PostList from "./PostList";
import axios from 'axios';

export default {
    name: "ContentSection",

    components: {
        PostList
    },

    mounted() {
      this.loadPosts();
      this.posts = JSON.parse(localStorage.data);
    },

    methods: {
        loadPosts() {
            axios.get('api/posts?page=' + this.page)
                .then(res => {
                    localStorage.setItem('data', JSON.stringify(res.data.data));
                    this.posts = JSON.parse(localStorage.data);
                    this.loading = false;
                })
        }
    },

    data: () => ({
        loading: true,
        posts: [],
        page: null 
    })
}
</script>

<style lang="sass" scoped>
</style>

Answer 1

[Александр]

https://codesandbox.io/s/qna-q-1125170-ke71q4

Comments

[Ilya Loopashko]

Шикарно, спасибо большое!