javascriptからvuejsコンポーネントにjavascript変数を渡します。

Question

私はいくつかのデータを必要とするvueコンポーネントを持っています。私は簡単に作成し、PHPのjsonデータをコンポーネントに渡します。しかし、私はjavascriptでオブジェクトを定義し、それをvueコンポーネントに送信したいと思います。以下は、php変数を正しく渡す私の.blade.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 

私は運がないすべての種類のものを試しました。私はそれが私はそれがグローバル変数をハードコードし、それは非常に再利用可能でなくなるようVUEコンポーネントの「データ」メソッドに追加したくない

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" 

ようなものになるだろうと思いました。私はそれを渡す必要があると思う。 PHP-Vars-To-Js-Transformer：ここ

は、JavaScriptパッケージを使用することができ、私のコンポーネントの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

としては、あなたの意見にLaravel変数を渡すために、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 
]) 

table_definitionは、あなたのVUEのインスタンスで利用可能であるべきです。

---

PHP変数をインスタンスに渡す場合は、hereの方法を使用できます。実際のブレードビューでVueインスタンスを開始しておく必要があります。単にスクリプトタグ内とあなただけ行うことができます。

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