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

问题描述：

I have a *.blade.php file which sends a GET request to an API. This returns a *.xml file which I am able to parse into the data to be used within the *.blade.php file. How do I go about passing this information to a *.vue file within my application? I've tried passing the data as a prop, but it doesn't seem to work correctly. Is there a best practice to handle this type of task?

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>

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

home.blade.php strong> p>

 ＆lt  ;？php 
 @ extends（'layouts.app'）
 
 //＆lt; PHP API REQUEST HERE＆gt; 
 
 $ example =从XML文件存储的数据; 
？＆gt; 
 
 @  section（'content'）
 
＆lt; app：example =“example”＆gt;＆lt; / app＆gt; 
 
 @ endsection 
  code>  pre> 
 
   app.vue  strong>  p> 
 
 
 ＆lt; template＆gt; 
＆lt; div＆gt; 
 {{example}} 
＆lt; / div＆gt; 
＆lt; / 模板＆GT; 
 
＆LT;脚本＆GT;  
export default {
 data（）{
 return {
 
} 
}，
 
 props：['example'] 
} 
＆lt; script＆gt; 
  code>   pre> 
  div>

答

There's a problem with your approach.

First of all, don't make HTTP requests in your blade files, do it in the controller, then pass data as variables to blade view('index', ['data' => 'array']).

Second point: if you want to pass simple data from PHP to Javascript, use echo in a script, example:

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

Finally, for your particular case, you should have an API endpoint in Laravel that makes the HTTP request, and call it with an AJAX request from Vue JS.

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

相关推荐