[Laravel & Vue.JS] 2.Video: “Laravel Blade Sayfalarında Vue Değişkenleri Nasıl Gösterilir?”



2 dakikalık okuma
February 24, 2019

Serinin 2.bölümü olan bu videoda şu konulara değindim:

  • Laravel Blade sayfalarında Vue değişkenleri gösterme,
  • Vue JavaScript dosyasına Laravel’den değişken gönderme,
  • Bonus olarak da Webpack‘te versiyonlama ile tarayıcı cache(bellekleme) problemlerini çözme.

Bu video 8 dakikadan oluşuyor. Videolar hazırlanırken belirli kriterlerim var. Mesela;

  • 10 dakikayı geçmeme gibi.
  • Tekrarlardan mümkün olduğunca kaçınma gibi. (Yine bazen yapsam da dikkat etmekteyim.)
  • Konunun özünden uzaklaşmadan içeriği en anlaşılır bir şekilde verme gibi…


Video Özeti:

Laravel Blade sayfalarında bir php değişkeni göstermek için süslü çift parentez kullanırız aşağıdaki gibi:

{{$deneme}}

Ve aynı şekilde Vue.js değişkenlerini göstermek için de aynı şekilde süslü çift parantez kullanırız. İşte bu kullanımı Laravel Blade sayfalarında yaparsak bir sorunumuz olacaktır. Vue.js değişkenleri çalışmayacaktır. Bunu aşmak için Laravel Blade sayfalarında aşağıdaki gibi kullanmalıyız:

Laravelde vue değişkeni tanımlama

böylece blade sayfasına diyoruz ki bu bir Vue.js değişkeni. Ona göre muamele yap.

Laravel’den gönderilen değişkenlerin Vue.js içerisinde kullanma yöntemi

Bunun için master page dediğimiz ana sayfamızın en üstünde global scope içerisine dahil olacak şekilde bir javascript değişkeni oluşturup bunu aşağıdaki örnek gibi Laravel’den gönderilen değişkenle eşitliyorum:

global değişken

Sonra app.js dosyamızda aşağıdaki gibi bu değişkeni kullanabilirim ya da tüm uygulama boyunca tüm javascript dosyalarında kullanabilirim.

global değişken

CSS ve Javascript dosyalarında değişiklik yapıldığında tarayıcıların cache’i dolayısıyla bazen bu hemen yansımıyor. Bu sorunsalı nasıl aşarız?

Bunun için aşağıdaki örnekte görülmek üzere Laravel mix içerisinde .version() anahtar kelimesini kullanmamız gerekir. Böylece her değişiklikte eşsiz bir numara veriyor ve cache problemini aşıyoruz.

version kullanımı

Unutmadan master sayfamızda bu javascript ve css dosyalarını tanımlarken aşağıdaki örnek gibi asset yerine artık mix metodunu kullanmalıyız.

mix metodunun kullanımı

version kullanımına örnek


Etiketler: