Bootstrap-vue - Modify Navbar from Vue component?

Question

I have a Vue Bootstrap SPA with the following structure:

layout
- navbar
- breadcrumb
- router view
component
- some content

I would like my component to inject a submenu to the parent's navbar. For example:

export default {
    name: 'Component',
    data() {
       return {
           menu: [
               'Item': {
                   href: '#'
               }
           ]
       }
    },
    mounted() {
       parent.menu.addItem(this.menu)
    }
}

Is this possible to do something like this?

Here the top layout:

<template>
  <div>
    <navbar :menu="menu"></navbar>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './navbar'

export default {
  components: {
    navbar: NavBar
  },
  data() {
    return {
      menu: [
        {
          text: "Foo",
          href: "/foo",
        },
        {
          text: "Bar",
          href: "#",
        },
      ],
    };
  },
};
</script>

While it might work, you could try using $emit, with or without an event bus to notify that the parent element should insert the sub-menu. — Heri Hehe Setiawan
– Heri Hehe Setiawan, Commented Sep 26, 2020 at 15:57
menu: [ 'Item': { href: '#' } ] is not a valid syntax you should do menu: [{ href: '#' } ] — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 26, 2020 at 16:07

Boussadjra Brahim · Accepted Answer · 2020-09-26 16:03:35Z

1

You could emit an event to the parent component like :

    data() {
       return {
           menu: [
                 {
                   href: '#'
               }
           ]
       }
    },
    mounted() {
       this.$emit('emit-menu',this.menu)
    }

in parent :

<template>

<navbar :menu="menu" @emit-menu="addItem"></navbar> 

    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './navbar'

export default {
  components: {
    navbar: NavBar
  },
  methods:{
   addItem(menu){
       this.menu=[..this.menu,...menu]
  }
 },
  data() {
    return {
      menu: [
        {
          text: "Foo",
          href: "/foo",
        },
        {
          text: "Bar",
          href: "#",
        },
      ],
    };
  },
};
</script>

answered Sep 26, 2020 at 16:03

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap-vue - Modify Navbar from Vue component?

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