Updating elements outside of a component

I’m using Laravel and Vue to create an app which has a master layout.blade file and then I’m using component and the VueRouter.

What I can’t get my head around is how to achieve the following.
Lets say I have two routes ‘Home’ and ‘About’ which call a dedicated home.vue and about.vue component files.

What if, outside of the component I have a H1 for the heading of the page contained in the master page. How would I go about updating that? Do I do it in route.js or the component file?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The best way to approach this is to have a base component with all your static components i.e. nav menu, footer and router-view. I think you may be getting confused because you are creating your layout in blade, but it’s easier to just have a blade file as an entry point that pulls in your scripts and css and gives Vue somewhere to mount your App.So you would have a blade file looking something like this:

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My App</title>

        <link href="/css/app.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" />
    </head>
    <body>
       <div id="app">

       </div>
       <script src="/js/app.js"></script>
    </body>
</html>

You would then create your layout in a base component (normally App.vue) and pass that to your render function in app.js:
import App from './components/App.vue'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

Then your App.vue would have something like:
<template>
  <nav-menu></nav-menu>
  <router-view></router-view>
  <app-footer></app-footer>
</template> 

<script type="text/javascript">
  import NavMenu from './components/NavMenu.vue'
  import AppFooter from './components/AppFooter.vue'

  export default{
    components:{
      NavMenu,
      AppFooter
    }
  }
</script>

This way you gradually build your app up with components. If you have a fancy header, that can also be a component you place on each page. I’ve put together a JSFiddle, obviously these aren’t single file components, but it shows the basic idea of what I’m talking about: https://jsfiddle.net/k3r3uzpx/


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x