如何将数据从 Laravel Blade 文件传递到 Vue 实例？答案

【问题标题】：How do I pass data from a Laravel Blade file to a Vue instance?如何将数据从 Laravel Blade 文件传递到 Vue 实例？
【发布时间】：2017-04-26 19:28:25
【问题描述】：

我有一个 *.blade.php 文件，它向 API 发送 GET 请求。这将返回一个 *.xml 文件，我可以将其解析为要在 *.blade.php 文件中使用的数据。如何将此信息传递到我的应用程序中的 *.vue 文件？我尝试将数据作为道具传递，但它似乎无法正常工作。是否有处理此类任务的最佳做法？

home.blade.php

<?php 
@extends('layouts.app')

// <PHP API REQUEST HERE>

$example = data stored from XML file;
?>

@section('content')

<app :example ="example"></app>

@endsection

app.vue

<template>
    <div>
{{ example }}
    </div>
</template>

<script>    
export default {    
    data() {
        return {    

        }
    },

    props: ['example']
}
<script>

【问题讨论】：

你不会将数据传递给 .vue 文件，而是传递给 vue 应用程序，它会在那里处理它并传递给你在刀片文件中拥有的组件
我是否会错误地传递数据？是一个组件我在尝试访问组件中的数据时遇到此错误。 “属性或方法“示例”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。”我的 vue 应用程序是在我的 app.js 文件中创建的 "const app = new Vue({ el: '#app', store });"
vuejs.org/v2/guide/components.html

标签： php laravel vue.js vuejs2

【解决方案1】：

你的方法有问题。

首先，不要在刀片文件中发出 HTTP 请求，在控制器中进行，然后将数据作为变量传递给刀片 view('index', ['data' => 'array'])。

第二点：如果你想将简单的数据从PHP传递到Javascript，在脚本中使用echo，例如：

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

最后，对于您的特定情况，您应该在 Laravel 中有一个 API 端点来发出 HTTP 请求，并使用来自 Vue JS 的 AJAX 请求调用它。

【讨论】：

感谢您的信息，我将开始研究如何实现这些方法。