php değişkenini vue bileşen örneğine geçirme

Question

Bir değişkenin değerini nasıl bir vue bileşenine iletebilirim? Benim örnekte

, ben çok geç benim vue örneğine url /client/1 ile birlikte gelen kimliği geçmek istiyorum ben laravel bu görünüm elde, bir satır içi şablon istemci ayrıntılara sahip. Laravel tarafından yüklenen

Benim bileşeni, benziyor:

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

ve monte: Zaten

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

gibi çalıştı

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

ama çalışmıyor .

Answer 1

Vue öğelerini işaretleme yoluyla Vue'nın bileşenlerine geçirebilmek için Vue's props kullanmanız gerekir. Aşağıdaki örnekte bir göz atın:

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

sizin Vue bileşeninde:

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

Şimdi Vue bileşeninin diğer bölgelerinde, sen this.clientId olarak bu değeri erişebilirsiniz.

HTML biz kebap-durumda adını öznitelik yazmak ama Vue tarafında biz CamelCase bunu yazmak unutmayınız. Daha fazla bilgi official docs here.

Answer 2

Sadece bunu yaptım ve benim için harika çalışıyor. Laravel 5.4 ve Vue 2.x Kullanımı Benim bileşeninde

, bir nesne için özellik (sahne) beyan: içinde

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

Not olun:

bileşen örneği benim bıçak sayfada

props: ['currentUser'],

bileşeni, ben currentUser için camelCase kullanıyorum, ancak html büyük/küçük harf duyarsız olduğundan, kebab-case (yani 'geçerli kullanıcı') kullanmanız gerekir. Ayrıca, {{ }} blade sözdizimini kullanırsanız, aralarındaki verilerin php htmlspecialchars aracılığıyla çalıştırıldığına dikkat edin. Ayrıca,Eğer kodlanmamış veriyi (bu durumda) istiyorsanız, o zaman {!! !!}

Answer 3

'u kullanın. Vue bileşenime bazı sunucu verilerini aktarmak zorunda kaldım, denetleyicide bir $server_data değişkeni oluşturup bir json komut dosyasında geçirdim etiket.Şablonda

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

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

: denetleyicisi

vue başlatma olarak

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

, bir bilgisayarlı özelliği koyun: Daha sonra

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

veri erişilebilir server_data.some_object ile bileşen şablonunda.