将 javascript 变量从 javascript 传递给 vuejs 组件

Question

我有一个需要一些数据的 vue 组件。我很容易在 php 中创建 json 数据并将其传递给组件。但我想在 javascript 中定义一个对象并将其发送到 vue 组件。下面是我的 .blade.php 文件，它正确传递了 php 变量。在脚本部分中，我定义了一个 javascript 对象 js_table_definition。该对象不想转到组件。

<?php
$table_definition = (object) [
    "name" => "vendors",
    "access" => "read",
    "search_post_route" => "",
    "index_post_route" => "",
    "index_get_route" => "",
    "header_definition" => [],
    "footer_definition" => [],
    "column_definition" => [],
];
?>
@section('content')
    <div class="panel-body">
        <zzi-results-table
                v-bind:results="{{  json_encode($vendors) }}"
                v-bind:table_definition="{{  json_encode($table_definition) }}"
        >
        </zzi-results-table>
    </div>
@stop

@section('script')
    //can't get this variable to zzi-results-table
    js_table_definition = {
        "name" : "vendors",
        "access" : "read",
        "search_post_route" : "",
        "index_post_route" : "",
        "index_get_route" : "",
        "header_definition" : [],
        "footer_definition" : [],
        "column_definition" : [],
    };

@stop

我尝试了各种各样的事情，但都没有运气。我以为会是这样的

v-bind:table_definition="{{ js_table_definition }}"
v-bind:table_definition="@{{ js_table_definition }}"
v-bind:table_definition="js_table_definition"
js_table_definition="js_table_definition"

我不想将它添加到 vue 组件的 'data' 方法中，因为这会硬编码全局变量并使其不可重用。我想我需要通过它。

这是我的组件 js

    export default {
    //data: function(){
    //    return
    //    {
    //        vendors:vendors
    //    }
   // },
    props: ['results', 'table_definition'],
    mounted() {
        console.log('Hi from zzi-results-table');
        console.log(this.results);
        console.log(this.table_definition);
        var results_table = new dynamic_table(this.table_definition, this.results);

 },

}

Answer 1

如here 所述，要将 Laravel 变量传递给您的视图，您可以使用 JavaScript 包：PHP-Vars-To-Js-Transformer。

你可以有这个代码，添加这个包后：

$table_definition = (object) [
    "name" => "vendors",
    "access" => "read",
    "search_post_route" => "",
    "index_post_route" => "",
    "index_get_route" => "",
    "header_definition" => [],
    "footer_definition" => [],
    "column_definition" => [],
];

JavaScript::put([
        'table_definition' => $table_definition
 ])

现在 table_definition 应该在您的 vue 实例中可用。

---

要将 PHP 变量传递给 vue 实例，您可以使用描述的方法here。您应该在实际刀片视图中启动 Vue 实例。只需在脚本标签内，您就可以这样做：

<script>
new Vue({
    data: {
        table_definition: {!! $table_definition !!}
    }
})
</script>