[ Laravel & Vue.JS ] 8.Video: “Vue.js direktifi olan v-for detaylı bir şekilde ele alındı.”



2 dakikalık okuma
April 2, 2019

Bu videoda:

  • Vue.js direktifi olan “v-for”a detaylı bakış yapıldı; Bunu takiben “v-for”da kullanılan özel değişkenler “index, value ve key” e değinildi ve örnekler yapıldı.

Buyrun video burada:


Video Özeti

NOT: Laravel blade sayfalarında Vue değişkenlerini gösterirken Laravel Blade sayfalarında vue.js değişkeni gösterme şeklinde yazmalısınız. Ben burada text olarak yazamıyorum. Çünkü bu sayfa ve blog da Laravel ve Vue.js kullanılarak geliştirildiği için o formatı yazmıyor. Örnekteki yazımda Laravel kullanıcıları buna dikkat etsin.

“v-for” direktifine detaylı bakış:

Dizi ya da nesnelerdeki elemanları listeletmeye yarar. PHP dilindeki foreach ile aynı işi görür ama değişken kullanımları foreach’tekinin tam tersidir. Şöyle:

var vue = new Vue({ el: ‘#app’, 
    data: { 

    kitaplar: [ {
          baslik: ‘ Sinekli Bakkal’,
          yazar: Halide Edip Adıvar’
        },
        {
          baslik: ‘ Saatleri Ayarlama Enstitüsü’,
          yazar: Ahmet Hamdi Tanpınar’
        }]    
  } 
});


<div id=“app”>
  <ul>
    <li v-for="kitap in kitaplar"> {{ kitap.baslik }} – {{kitap.yazar}} 
    </li> 
  </ul>
</app>

Yukarıdaki örnekte “kitap” döngüde tanımlanmış bir değişken olup “kitaplar” da Vue nesnesinde tanımladığımız içinde nesneleri barındıran bir dizidir.

v-for için özel değişken: “index”

var vue = new Vue({ el: ‘#app’, 
    data: { 

    kitaplar: [ {
          baslik: ‘ Sinekli Bakkal’,
          yazar: Halide Edip Adıvar’
        },
        {
          baslik: ‘ Saatleri Ayarlama Enstitüsü’,
          yazar: Ahmet Hamdi Tanpınar’
        }]  
  } 
});

<div id=“app”>
  <ul>
    <li v-for="(kitap, index) in kitaplar"> {{ index }} - {{ kitap.baslik }} – {{kitap.yazar}} 
    </li> 
  </ul>
</app>

Dikkat etmeniz gereken tek şey bu kullanımda v-for="(kitap, index) in kitaplar" index’in hep sonda olması gerek. ..(değişken,index).. gibi.

Özel değişken “value” ve “key” kullanımı:

Sadece nesneler için kullanılacak v-for için özel değişken “value” ve “key” dir.

var vue = new Vue({ el: ‘#app’, 
    data: { 

    nesne: {
          baslik: ‘Sinekli Bakkal’,
          yazar: Halide Edip Adıvar’
        }   
  } 
});

<div id=“app”>
  <ul>
    <li v-for="(value,key, index) in nesne"> {{ index }} - {{ key}} – {{value}} 
    </li> 
  </ul>
</app>

Kullanım sıralaması yukarıdaki örnekteki gibidir: (value,key, index)


Etiketler: