passer une variable javascript de javascript au composant vuejs

Question

J'ai un composant vue qui a besoin de données. Je crée et transmets facilement des données json en php au composant. Mais je veux définir un objet en javascript et l'envoyer au composant vue. Voici mon fichier .blade.php qui passe correctement les variables PHP. Dans la section script, je définis un objet javascript js_table_definition. Cet objet ne veut pas aller au composant.

<?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 

J'ai essayé toutes sortes de choses sans chance. Je pensais que ce serait quelque chose comme

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" 

Je ne veux pas ajouter à la méthode « données » de la composante de vue car cela hardcode la variable globale et la rendre pas très réutilisable. Je pense que je dois le transmettre.

Voici mon composant de

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

Comme décrit here, pour transmettre des variables Laravel à votre point de vue, vous pouvez utiliser le package JavaScript: PHP-Vars-To-Js-Transformer.

Vous pouvez avoir ce code, après avoir ajouté ce paquet:

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

Maintenant table_definition devrait être disponible dans votre instance de vue.

---

Pour passer la variable PHP à vue Vous par exemple, vous pouvez utiliser l'approche décrite here. L'instance de Vue doit être démarrée dans votre vue lame actuelle. Tout simplement dans les balises de script et vous pouvez juste faire:

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