将刀片文件中的数据直接传递给 Vue 实例

Posted 2023-03-05

【中文标题】将刀片文件中的数据直接传递给 Vue 实例

【英文标题】：Pass data from blade file directly to Vue instance

【发布时间】：2018-09-26 03:46:54

【问题描述】：

我正在开发一个存在于 Laravel 项目中的 Vue 应用程序。我将我的 vue 实例绑定到放置在刀片文件中的 id。

我想做的是将登录的用户从 Laravel/blade 传递给我的 Vue 实例。有没有办法做到这一点？我知道你可以通过 props 传递数据，但这只是一个 id 为 #root 的常规 div，它绑定了 Vue 实例。我知道如何获取已登录的用户，但我特别想寻找一种将数据从刀片直接传递到我的 vue 实例的方法。

app.js

// Require the deps from laravel (jQuery, axios, Bootstrap)
require('./bootstrap');

// Import vue deps
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)

// Import the router & routes
import router from './routes'

// Init a new vue instance
const root = new Vue(
    el: '#root',
    data: 
        User: name here..
    ,
    router
);

刀片

@extends('layouts.app')

@section('content')

<!-- pass user below -->
<div id="root"></div>

@endsection

【参考方案1】：

你有几个选项（我想我没有列出所有）例如：

您可以通过将数据转换为 json 并写入 html 元素或属性来传递数据，然后使用例如从 vue 读取它。 document.querySelector(...) - 更多信息：Best way to store JSON in an HTML attribute?

您可以更改一点架构并创建单独的（Restful）API，您的 vue 组件将通过 ajax 使用这些 API 来读取数据（例如，您可以创建 GET api/v1/currentUser 来读取当前登录的用户）

完全改变你的架构 - 到“微服务” - 所以在 laravel 中只创建 Restful API，并使用使用该 API 的 vue（和 NO laravel）用户界面创建 SEPEARATE 项目（这是分离后端的现代方法前端）。您将在这种方法中遇到 CORS 问题，但并不难（仅在第一次）。

【讨论】：

好吧，我同意您的选择是可能的，但我特别想寻找一种通过 html/blade 将数据传递给实例的方法。也许这是不可能的，我不确定，但在我做上面的事情之前，我必须先看看。谢谢:)

【参考方案2】：

您可能想查看php-Vars-To-Js-Transformer 包。您可以在控制器或 @php 指令中使用它。 不过，使用 VueJS 可能不是一个好习惯。

【参考方案3】：

在您的刀片文件中，将记录的用户信息传递给 javascript 全局变量。假设您只需要用户 ID 和名称：

<script>
    window.auth_user = !! json_encode([
        'id'     => auth()->user()->id,
        'name'   => auth()->user()->name
    ]) !!;
</script>

然后在您的 javascript 中，您可以访问 auth_user 全局变量。 例如，要记录用户名：

console.log(auth_user.name)

或

console.log(window.auth_user.name)

【讨论】：

工作就像一个魅力。我曾使用 window.attribute 处理不同的 js 文件，但不是这样。

非常有趣的解决方案。也许不是直接针对这个问题，但很有帮助。谢谢。