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

标签 javascript php laravel vue.js

我有这样的导航栏:

<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 变量?

最佳答案

Prop 是你能做的唯一明智的事情。你必须让它们工作,否则将 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}}是Vue.js指令写test的属性值

navbar.blade.php

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

这里的 {{$test}} 是用来回显 PHP 变量 test 的 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>

关于javascript - 使用 vue.js 在每个页面上更改 laravel 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46077257/

相关文章:

javascript - 如何使用 Office-js-helper 的身份验证获取用户信息?

javascript - Mocha - 测试 Promise, `done` 永远不会在 Promise 中被调用

php - 如何获取当前语言环境一周的第一天? (PHP/L8N)

javascript - 地理定位在 Android 版 Chrome 和 Android 版 Firefox 中不起作用

javascript - 在 C# MVC 中检查所有子项时未检查 Jquery 复选框

php - 在codeigniter中使用html2pdf导出pdf时foreach错误数组

javascript - jQuery - 通过 Id 获取动态 (*) 元素并放入数组

javascript - Laravel Spark 模板中的自定义标签?

php - 在 Laravel 中用于本地和生产的单个 Redis 配置?

php - Laravel 5 Dingo API Controller