如何从Laravel控制器向Vue.js发送值？

Question

我有控制器“ SomethingController”，模型“ ValueModel”和视图“ Show.blade.php”，以及具有组件“ vue-component”的vue
现在，我想从 SomethingController 到 Show.balde.php 中获取发送值（我从模型“ ValueModel”中获取，并且该值采用JSON格式），该值将由vue < strong>“视频组件” 。最后，我想从控制器中获得价值。

我知道如何从控制器发送值以进行查看。并且通过使用 props 将值发送到字符串中时，将其发送到了vue。但是我无法将prop的JSON值发送到vue。

控制器

//SomethingController.php
class SomethingControllerextends Controller
{
    public function index()
    {
        $e = ValueModel::get();
        $e = json_encode($e->toArray());
        return view('pages.Show')->with('e', $e);
    }
}

查看

//Show.blade.php
<div class="app">
    <vue-component data={!!$e!!}></vue-component>
</div>

Vue

//SomethingController.php
<script>
export default {
    props: ['data'],
    data(){
        return{
            d : this.data,
        }
    },
    beforeCreate(){
        console.log('helllo');
        console.log(d)
        },
}
</script>

令我惊讶的是，我正在窗口上打印数据。在窗口上打印该值后，函数beforeCreate（）中的操作不起作用。
如图所示，数据正在打印在从控制器发送的窗口中，正如我希望在vue中获取数据一样。我也想知道为什么要打印它。

  

对于从控制器返回的String一切正常

Answer 1

我得到了答案，这里必须使用单引号。 data = '{!!$e!!}'之所以这样，是因为$e中的数据具有双引号。例如：[{"country":"Alwaysland","zip":"0023"},{"country":"Neverland","zip":"00111"}]