Vue.js 动态组件 - 仅在组件内部获取数据时加载

Question

I am implementing Vue.js dynamic components but I can't seem to figure out how to show the component only when it has fetched it's data. Until then it should show the old component.

The scenario is this. When the page is loaded it should show the Home component. Then I click on "Show posts". Nothing should happen until the Posts component has fetched it's posts. Then it should show the Posts component. I don't want any loading to show.

I could fetch posts in my Home compoent but I think the Posts component should be responsible for that. Also if I have many components I don't want to fetch all their data in my Home component. They should fetch their own data (I think). Is this possible to do?

home.js

import Home from './home.js'
import Posts from './posts.js'

export default {
    template: `
        <div>
            <a @click="showPosts">Show posts</a>
            <component :is="currentComponent" />
        </div>
    `,

    methods:
    {
        showPosts()
        {
            // Do this ONLY after the Posts component has fetched it's data... not immediately...
            this.currentComponent = Posts
        }
    },

    data:
    {
        currentComponent: Home
    },
}

posts.js

export default {
    template: `
        <div>
            <div v-for="post in posts">{{ post.body }}</div>
        </div>
    `,

    data:
    {
        posts: [],
    },

    created()
    {
        axios.get('/posts').then(({ data } => {
            this.posts = data
        })
    },
}

Answer 1

If you want to show posts component only when posts are fetched, the only way is to fetch data in the parent component . To do this you normally decouple the fetching from the component. You have something like a apiService , which fetches posts and the Posts component really is only the view and its only purpose is displaying data. This way your code also becomes much more re-usable, since many api requests probably share a lot of logic.

Here is how your component could look like:

home.js

import Home from './home.js'
import Posts from './posts.js'
import apiService from '../services/apiService.js'

export default {
    template: `
        <div>
            <a @click="showPosts">Show posts</a>
            <component :posts="posts" :is="currentComponent" />
        </div>
    `,

    methods:
    {
        showPosts()
        {
            apiService.fetchPosts().then((response) => {
                this.posts = response.data.posts
                this.currentComponent = Posts
            });
        }
    },

    data:
    {
        posts: []
        currentComponent: Home
    },
}

Answer 2

You can use the async created hook in combination with a v-if statement.

So you basically wrap your template in a v-if

template: '<div v-if="dataloaded">This is component xlr</div>

Inside the async created you load your data and set the flag to true once it is finished

  async created() {
  await loadData(3000);
  this.dataloaded = true;},

See a working fiddle here: https://jsfiddle.net/Postlagerkarte/yomb5qv6/

Answer 3

Your procedure is not really good coding practice.

I would recommend you to use Vuex. It allows you to share states across many components.

Some resources:

What is Vuex?

Vuex State Management