时间戳

首页 > 解决方案 > 如何将值从 Laravel 的控制器发送到 Vue.js？

php - 如何将值从 Laravel 的控制器发送到 Vue.js？

问题描述

我有控制器“SomethingController”，模型“ValueModel”和视图“Show.blade.php”和带有组件“vue-component”的vue
现在我想获取发送值（我从模型“ValueModel”获得，值是JSON格式）从SomethingController到Show.balde.php，其中将包含 vue "vue-component"。最后，我想从控制器中获取 vue 的价值。

我知道如何将值从控制器发送到视图。当值在字符串中时，我已经使用props将它发送到 vue 。但我无法将 JSON 值从 prop 发送到 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 中的数据。我也想知道为什么要打印它。

从控制器返回的字符串一切正常

标签： phplaravelvue.jsvuejs2

解决方案

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

推荐阅读