Change laravel variable on every page using vue.js

Question

I have navbar like this:

<nav class="navbar">
        <p style="text-align: center; color: white;">{{ @$test}}</p>
</nav>

And my page looks like:

<body class="">
    <div id="app">
        <div class="">
        @include('navbar')
        @yield('content') <- here another components
        </div>
    </div>
</body>

How to change that @$test laravel variable using vue.js?

You probably need to define a navbar component with a prop you can use — apokryfos
– apokryfos, Commented Sep 6, 2017 at 14:06
@apokryfos tried it :), doesn't work stackoverflow.com/questions/46075392/… — Rowinski Bartosz
– Rowinski Bartosz, Commented Sep 6, 2017 at 14:07
What version of Laravel are you using? What are you wanting to replace @$test with? — Rwd
– Rwd, Commented Sep 6, 2017 at 14:18

apokryfos · Accepted Answer · 2017-09-06 14:19:25Z

1

Props are the only sensible thing you can do. You must make them work otherwise using vue with components will just be a pointless exercise.

Based on this response : https://stackoverflow.com/a/46076011/487813

Use a prop in you component:

props: ['test'],

<template>
<nav class="navbar">
    <p style="text-align: center; color: white;">{{test}}</p>
</nav>
</template>

Here {{test}} is the Vue.js directive to write the property value of test

In navbar.blade.php

<component-name :test="{{$test}}"></component-name>

Here {{$test}} is the blade directive to echo the PHP variable test.

<body class="">
    <div id="app">
        <div class="">
        @php
           $test = 'set the right value for test here or anywhere before including the navbar';
        @endphp
        @include('navbar')
        @yield('content') <- here another components
        </div>
    </div>
</body>

answered Sep 6, 2017 at 14:19

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

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

3 Comments

Hiren Gohel Over a year ago

So, i think i am right in my answer right sir? This is my answer: stackoverflow.com/a/46076011/487813

apokryfos Over a year ago

@HirenGohel yes, the thing added here is the passing of the PHP variable as the component prop.

Hiren Gohel Over a year ago

Ok, thank you sir for your kind reply! @Rowinkski: please accept my answer so that other user may not waste their time! And close that issue

Collectives™ on Stack Overflow

Change laravel variable on every page using vue.js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related