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

如[{3}}所述，要将Laravel变量传递给您的视图，您可以使用JavaScript包：here。

添加此软件包后，您可以拥有此代码：

$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
 ])

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

要将PHP变量传递给vue实例，可以使用PHP-Vars-To-Js-Transformer描述的方法。您应该在实际的刀片视图中启动Vue实例。只需在脚本标记内，您就可以：

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

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

1 个答案: