7. [vuejs-05] projesi: [v-for] yönergesi

[vuejs-05] projesi, [v-for] yönergesini içerir:

7.1. Ana komut dosyası [main.js]

[main.js] ana betiğinin kodu, önceki projelerdeki [main.js] betiğinkiyle aynıdır.

7.2. Ana bileşen [App]

[App] bileşeninin kodu şöyledir:

<template>
  <b-container>
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-05] : attribut [v-for]</h4>
      </b-alert>
      <VFor />
    </b-card>
  </b-container>
</template>


<script>
  import VFor from "./components/VFor.vue";

  export default {
    name: "app",
    components: {
      VFor
    }
  };
</script>

• 7., 14. ve 19. satırlar: [App] bileşeni, [VFor] bileşenini kullanır;

7.3. [VFor] bileşeni

Görsel çıktı şu şekilde olacaktır:

[VFor] bileşeninin kodu şöyledir:

<template>
  <div>
    <!-- açılır liste -->
    <b-dropdown id="dropdown" text="Options">
      <b-dropdown-item v-for="(option,index) in options"
                       :key="option.id"
                       @click="select(index)">{{option.text}}</b-dropdown-item>
    </b-dropdown>
    <!-- düğme -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- uyarı -->
    <b-alert show variant="danger" v-if="error" class="mt-3">
      Les erreurs suivantes se sont produites :
      <br />
      <ul>
        <li v-for="(erreur,index) in erreurs" :key="index">{{erreur}}</li>
      </ul>
    </b-alert>
  </div>
</template>
<!-- komut dosyası -->
<script>
  export default {
    name: "VFor",

    // bileşenin statik özellikleri
    data() {
      return {
        // hata listesi
        erreurs: [],
        // hata mı değil mi
        error: false,
        // menü seçenekleri listesi
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // yöntemler
    methods: {
      // hata listesinin oluşturulması
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // kullanıcı bir seçenek seçti
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Açıklamalar

• 4. satır: <b-dropdown> etiketi, [1] açılır listesini, üzerine tıklandığında [2] listesindeki seçenekleri gösteren bir düğme şeklinde tanımlamak için kullanılır. [text=’Options’], [1] düğmesinde görüntülenecek metni tanımlar;
• 5-7. satırlar: <dropdown-item> etiketi, açılır listenin bir öğesini tanımlar;
• 5. satır: [v-for] özniteliği, bileşenin 37-41. satırlarında yer alan [options] özniteliğindeki her bir [option] öğesi için <dropdown-item> etiketinin tekrarlanması gerektiğini belirtir. [index], [0, 1, ..., n] listesindeki öğenin numarasını temsil eder. [option] öğesinin adı ve indeks adı serbesttir. [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>] yazılabilirdi;
• 6. satır: [key] özniteliği unutulursa, ESLint bir uyarı verir. [key] özniteliğinin değeri zaman içinde sabit kalmalıdır. Bu nedenle, öğenin [index] değeri uygun değildir. Çünkü bu öğe silinirse, listede onun arkasında yer alan öğelerin [index] değerleri 1 azaltılacaktır. Bu nedenle burada, bir öğenin silinmesi durumunda değişmeyecek olan [option.id] değerini anahtar değeri olarak alıyoruz (satır 38-40). [key] özniteliği, listenin yeniden oluşturulması gerektiğinde DOM (Belge Nesne Modeli) öğesinin [Vue.js] tarafından yeniden oluşturulmasını optimize eden bir unsurdur. [:key] notasyonuna dikkat edin, çünkü [key] dinamik bir değere sahiptir;
• 7. satır: Kullanıcı listeden bir öğeye tıkladığında, 49-51. satırlarda yer alan [select(index)] yöntemi çağrılacaktır;
• 7. satır: Seçeneğin metni, 37-41. satırlarda tanımlanan [option.text] değeri olacaktır;
• 10. satır: [3] düğmesi. [class=’ml-3], üç boşluk genişliğinde sol kenar marjı (m) anlamına gelir. [@click="generateErrors"], düğmeye [click] komutu verildiğinde, 45-48. satırlardaki [generateErrors] yönteminin yürütüleceğini belirtir. [v-if="!error"], düğmenin görüntülenmesinin 35. satırdaki [error] statik özniteliğinin değerine bağlı olduğunu belirtir;
• 15-21. satırlar: [danger] [4] türünde bir uyarı, bu da 35. satırdaki [error] statik özniteliği tarafından kontrol edilmektedir. [class=’mt-3’] özniteliği (üst kenar boşluğu 3 boşluk), bu uyarı ile üstündeki öğe arasındaki boşluğu belirler;
• 27. satır: HTML <br /> etiketi satır sonu oluşturur;
• 18. satır: [ul=unordered list] numaralı sıralanmamış listenin başlangıcı;
• 19. satır: <li> etiketi, <ul> listesinin bir öğesini tanımlar. Burada da, etiketi birden çok kez oluşturmak için bir [v-for] yönergesi kullanılır. Burada, 33. satırdaki [erreurs] tablosundaki öğe sayısı kadar tekrar edilir. Burada [:key=index] özniteliği kullanılır. Daha önce, bir listenin öğelerinin indeksinin liste öğeleri arasında iyi bir ayırt edici unsur olmadığını belirtmiştik; çünkü bir öğe silindiğinde, onu takip eden tüm öğelerin indeksleri değişir. Burada bu önemli değildir, çünkü hata listesindeki öğelerin silinme olasılığı yoktur;
• 19. satır: Bu öğe, [erreurs] listesindeki [erreur] öğesini görüntülemek için kullanılır;
• satır 30-43: [template]'in tüm dinamik öğeleri, bileşenin öznitelikleridir. Burada, değeri üst bileşen tarafından belirlenen [props] türünde hiçbir özellik yoktur;
• satır 48-55: [generateErrors] yöntemi, 16-18. satırlardaki <ul> etiketiyle görüntülenecek hata listesini oluşturur. Ayrıca, bu yöntem hem bu hata listesini görüntülemek (satır 15) hem de oluşturma düğmesini gizlemek (satır 13) için [error] statik özniteliğini değiştirir;

7.4. Projenin çalıştırılması