Atributi key në Vue

Gjatë përditësimit të listës së elementeve nga Vue, të renderuar me direktivën v-for, si parazgjedhje përdoret strategjia e përditësimit "në vend". Nëse rendi i elementeve të array ose objektit ndryshon, Vue nuk do të lëvizë elementët e DOM, thjesht do të përditësojë çdo element "në vend" në mënyrë që ai të shfaqë të dhënat e reja në indeksin përkatës.

Për t'i treguar Vue-s se si të përcaktojë identitetin e çdo elementi, dhe, në këtë mënyrë, të ripërdorë dhe të renditë elementët ekzistues, është e nevojshme të specifikohet atributi unik key për çdo element.

Pa çelësa, Vue përdor një algoritëm që minimizon lëvizjet e elementeve dhe do të përpiqet sa më shumë të ndryshojë/ripërdorë elementë të të njëjtit tip. Kur përdoren çelësa, elementët do të rirenditen në përputhje me ndryshimin e rendit të çelësave, ndërsa elementët, çelësat e të cilëve mungojnë, do të gjithmonë fshihen/shkatërrohen.

Rekomandohet që gjithmonë të specifikohet atributi key me v-for, përveç rasteve kur përmbajtja e përsëritur e DOM është e thjeshtë, ose kur me vetëdije mbështeteni në strategjinë e përditësimit si parazgjedhje për përmirësimin e performancës.

Në përgjithësi, çështja e shtimit të çelësave lind gjatë përsëritjes së një array objektesh. Në këtë rast, një nga çelësat e objektit është një fushë unike, për shembull, id:

javascriptdata() {
  return {
    users: [
      {
        id: 1,
        name: 'name1',
        surn: 'surn1',
      },
      {
        id: 2,
        name: 'name2',
        surn: 'surn2',
      },
      {
        id: 3,
        name: 'name3',
        surn: 'surn3',
      },
    ]
  }
}

Le të përsërisim array-n e dhënë me një cikël, duke specifikuar çelësat përkatës:

html<template>
  <p v-for="user in users" :key="user.id">
    {{ user.name }}
    {{ user.surn }}
  </p>
</template>

javascriptdata() {
  return {
    products: [
      {
        id: 1,
        name: 'product1',
      },
      {
        id: 2,
        name: 'product2',
      },
      {
        id: 3,
        name: 'product3',
      },
    ]
  }
}