Question

我有这样的导航栏：

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

我的页面看起来像：

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

如何使用vue.js更改@ $ test laravel变量？

Answer 1

道具是你能做的唯一明智之举。你必须使它们工作，否则使用vue与组件只是一个毫无意义的练习。

根据此回复：https://stackoverflow.com/a/46076011/487813

在您的组件中使用prop：

props: ['test'],

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

这里{{test}}是用于编写test

的属性值的Vue.js指令

在 navbar.blade.php

中

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

这里{{$test}}是用于回应PHP变量测试的blade指令。

<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>

使用vue.js在每个页面上更改laravel变量

1 个答案: