Inject content in component from other component using Vue

Question

I have your usual admin dashboard (Core-UI) which I'm modifying for my own needs. I have an "aside" component into which I want to load MonitorAside.vue whenever I am on the Monitor page (I am using vue-router)

Here's a small rundown.

src/containers/Full.vue imports all the main components (including aside) and then uses router-view to render the view based on the route.

src/components/Aside.vue is the component in question. It contains fixed content but I want its content to dynamically be changed if another component requires to do so.

src/views/Monitor.vue is the page in question and thus the page which dynamically needs to inject/swap the content of the aside component. Note that this component is not imported in Full.vue but is rendered through the router there.

src/views/asides/MonitorAside.vue is the component I want to be loaded into Aside.vue whenever I am on the Monitor page.

How would I go about doing this?

Florian Haider · Accepted Answer · 2017-09-20 09:42:04Z

So whenever vue-router navigates to a different page, you want the content of your Aside component to change? You can watch the $route value and then render the content depending on your route names, something like:

<template>
<div>
    <monitor-aside v-if="page === 'monitor'"></monitor-aside>
    <div v-else>
        <!-- your default aside content -->
    </div>
</div>
</template>

<script>
import MonitorAside from '../views/asides/MonitorAside.vue'
export default {
    data() {
        return {
            page: null
        }
    },
    methods: {
        setContent(routeName) {
            if (routeName === 'Monitor') {
                this.page = 'monitor';
            } else {
                this.page = null;
            }
        }
    },
    created() {
        this.setContent(this.$route.name);
    },
    watch: {
        '$route'(to, from) {
            this.setContent(to.name);
        }
    }
    components: {
        MonitorAside
    }
}
</script>

Collectives™ on Stack Overflow

Inject content in component from other component using Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related