Question

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

我想要做的是将记录的用户从Laravel / blade传递给我的Vue实例。有没有办法做到这一点？我知道你可以通过道具传递数据，但这里只是一个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

Answer 1

在您的刀片文件中，将记录的用户信息传递给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)

Answer 2

你有几个选择（我想我不会全部列出），例如：

您可以通过将数据转换为json并将其作为HTML元素或属性进行写入来传递数据，然后使用例如vue从vue中读取数据。 document.querySelector（...） - 更多信息：Best way to store JSON in an HTML attribute?
您可以更改littlebit架构并创建单独的（Restful）API，您的vue组件将通过ajax使用来读取数据（例如，您可以创建GET api / v1 / currentUser读取当前登录的用户）
完全改变您的架构 - 到＆＃34;微服务＆＃34; - 所以在laravel中只创建Restful API，并创建带有vue（和NO laravel）用户界面的SEPEARATE项目，该用户界面使用该API（它是从前端分离后端的现代方法）。你会在这种方法中遇到CORS问题，但它没有那么难（仅在第一次）。

Answer 3

您可能需要查看PHP-Vars-To-Js-Transformer 包。您可以在控制器中或@php指令中使用它可能不是VueJS的好习惯。

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

3 个答案: