Übergeben Sie PHP-Variable zu Vue-Komponente Instanz

Question

Wie kann ich einen Wert einer Variablen an eine Vue-Komponente übergeben?

In meinem Beispiel habe ich eine Inline-Template-Client-Details, erhalte ich diese Ansicht von laravel jetzt so dass ich die ID übergeben werden soll, die mit der URL /client/1 meiner vue Instanz kommt.

My-Komponente, die von Laravel geladen wird, sieht so aus:

<client-details inline-template> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details> 

und montiert von:

Vue.component('client-details', { 
    data(){ 
     return { 
      clientId: null 
     } 
    }, 
); 

Ich habe bereits versucht, wie

:clientId="{{ $client->id }" 

aber es funktioniert nicht .

Answer 1

Sie müssen Vues props verwenden, um Attribute über Markup an Vues Komponenten zu übergeben. Werfen Sie einen Blick auf das folgende Beispiel:

<client-details inline-template client-id="{{ $client->id }}"> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details> 

In Ihrem Vue Komponente:

Vue.component('client-details', { 
    props: [ 
     { 
      name: 'clientId', 
      default:0, 
     } 
    ] 
}); 

nun in anderen Teilen des Vue Komponente, können Sie diesen Wert als this.clientId zugreifen können.

Bitte beachten Sie, dass in HTML schreiben wir Namen in Kebab-case Attribut aber in Vue Seite schreiben wir es in camelcase. Weitere Informationen in official docs here.

Answer 2

Ich habe gerade das getan und es funktioniert gut für mich. Verwenden von Laravel 5.4 und Vue 2.x.

In meiner Komponente, eine Eigenschaft deklarieren (Requisiten) für das Objekt:

props: ['currentUser'],

Auf meiner Klinge Seite, wo die Komponente instanziiert wird:

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

Beachten Sie, dass in der Komponente, ich benutze CamelCase für currentUser, aber weil HTML Groß-und Kleinschreibung nicht beachtet, müssen Sie Kebab-Fall (also, der 'aktuelle Benutzer').

Beachten Sie auch, wenn Sie Blade-Syntax verwenden {{ }} dann die Daten zwischen php htmlspecialchars läuft. Wenn Sie uncodierte Daten benötigen (was in diesem Fall Sie tun würden), dann verwenden Sie {!! !!}

Answer 3

Ich musste einige Serverdaten an meine Vue-Komponente übergeben, ich endete beim Erstellen einer $server_data Variable in der Steuerung und Übergabe in einem JSON-Skript Etikett.

In der Steuerung:

$server_data = json_encode([ 
    "some-data" => SomeObject::all() 
]); 

return View::make('myview', compact('server_data')); 

In der Vorlage:

<script type="application/json" name="server-data"> 
    {{ $server_data }} 
</script> 
<!-- Inserts server data into window.server_data --> 
<script> 
    var json = document.getElementsByName("server-data")[0].innerHTML; 
    var server_data = JSON.parse(json); 
</script> 

Im vue Initialisierung ich eine berechnete Eigenschaft setzen:

computed: { 
    'server_data': function(){ 
     return window.server_data; 
    } 
} 

Dann sind die Daten zugänglich in der Komponentenvorlage mit server_data.some_object.