Pengantar Daftar Rendering di Vue

Salah satu tugas paling umum dalam pengembangan web adalah merender daftar data. Vue menangani ini dengan bantuan v-untuk pengarahan. Anda akan menjelajahi apa itu direktif v-for, cara menghapus item dari daftar, dan cara merender daftar dengan kunci.

Apa Arahan v-for di Vue?

Itu v-untuk direktif adalah salah satu direktif Vue yang memungkinkan Anda merender daftar dengan kode JavaScript minimal. Itu v-untuk direktif bekerja mirip dengan for lingkaran dalam JavaScript dan dapat mengulangi array dan objek untuk merender item dalam daftar.

Untuk memanfaatkan v-untuk direktif, berikan array yang ingin Anda iterasi di data properti dari Objek opsi di Vue.

Misalnya:

<templat>
<ul>
<liv-untuk="nama dalam nama">{{ nama }}li>
ul>
templat>
<naskah>
standar ekspor {
 data() {
 kembali {
 nama: ['John', 'Doe', 'James'],
 };
 },
};
naskah>

Blok kode di atas menggambarkan contoh aplikasi Vue yang menggunakan v-untuk direktif untuk iterate atas nama array yang disediakan di data Properti.

v-untuk memiliki nilai yang diatur ke ekspresi dengan dua bagian: variabel iterasi (nama) dan nama Himpunan v-untuk menunjuk ke. Variabel iterasi menampung masing-masing nama dalam nama array dan menampilkan nama.

Vue membuat yang baru Model Objek Dokumen (DOM) elemen untuk masing-masing nama dalam nama array dan merendernya di halaman web.

Jika nama perubahan array (misalnya, nama baru ditambahkan atau yang lama dihapus), Vue akan secara otomatis memperbarui DOM virtual dan merender ulang daftar untuk mencerminkan data yang diperbarui.

Vue juga menawarkan cara untuk mendapatkan indeks suatu elemen dalam daftar.

<liv-untuk="(nama, indeks) dalam nama">{{ nama }} -- {{ indeks }}li>

Kode di atas menggambarkan sintaks untuk menampilkan indeks masing-masing nama dalam nama Himpunan.

Anda juga dapat memanfaatkan v-untuk direktif untuk mengulang melalui rentang angka:

<liv-untuk="bilangan dalam 10">Vue bagusli>

Kode di atas akan membuat daftar dengan teks Vue bagus sepuluh kali. Itu v-untuk direktif juga dapat mengulang rentang angka untuk berulang kali menampilkan data atau melakukan operasi. Dalam hal ini, nomor variabel iterasi digunakan untuk mengakses item saat ini dalam daftar.

Cara Menghapus Item Dari Daftar di Vue

Anda dapat mengizinkan pengguna menghapus item dari daftar di aplikasi web Anda. Fitur ini berguna saat membuat aplikasi seperti daftar tugas.

Anda dapat menggunakan sambatan Metode JavaScript (itulah salah satu caranya menghapus item dari array) untuk menghapus item dari daftar di Vue.

array.splice (startIndex, numToRemove, newElements)

Metode sambatan dapat menambah atau menghapus item dari array. Metode sambatan mengambil parameter dalam urutan berikut:

1. Itu mulaiIndex parameter mengatur indeks untuk mulai memodifikasi array.
2. numToRemove menunjukkan jumlah item yang ingin Anda hapus dari array.
3. Akhirnya, newElements parameter, yang dapat Anda gunakan untuk menambahkan elemen ke array. Jika tidak ada elemen yang ditentukan, sambatan() hanya akan menghapus elemen dari array.

Untuk menggunakan metode sambatan untuk menghapus item dari daftar di Vue, Anda perlu mengetahui indeks item tersebut. Salah satu cara untuk mencapai ini adalah dengan lulus indeks sebagai argumen untuk metode yang menangani penghapusan item.

Misalnya, Anda dapat menambahkan tombol di samping setiap nama dalam larik yang memicu metode untuk menghapus item saat pengguna mengkliknya:

<templat>
<ul>
<liv-untuk="(nama, indeks) dalam nama">
 {{ nama }} -- {{ indeks }}
<tombol @klik="hapusItem (indeks)">Menghapustombol>
li>
ul>
templat>

Itu indeks parameter memberi kita akses ke indeks masing-masing nama dalam array, yang diteruskan program ini sebagai argumen ke hapusItem metode. Itu hapusItem metode kemudian dapat menggunakan sambatan cara menghilangkan a nama dari nama Himpunan:

<naskah>
standar ekspor {
 data() {
 kembali {
 nama: ['John', 'Doe', 'James'],
 };
 },
 metode: {
 hapusItem (indeks) {
 this.names.splice (indeks, 1);
 }
}
};
naskah>

Skrip di atas menggunakan sambatan metode untuk menghapus satu nama dari daftar nama yang diberikan. Ini akan secara otomatis memperbarui daftar di UI untuk mencerminkan larik yang diperbarui.

Cara Merender Daftar Dengan Kunci di Vue

Itu kunci atribut adalah atribut unik yang digunakan Vue untuk melacak identitas setiap item dalam daftar. Ketika item dalam daftar berubah, dengan bantuan kunci atribut Vue dapat memperbarui DOM dengan cepat tanpa merender ulang seluruh daftar.

Mari kita lihat contoh merender daftar dengan kunci di Vue:

<templat>
<div>
<ul>
<liv-untuk="nama dalam nama":kunci="nama.id">
 {{ nama.nama }}
<tombol @klik="hapusItem (nama.id)">Menghapustombol>
li>
ul>
div>
templat>
<naskah>
standar ekspor {
 data() {
 kembali {
 nama: [
 { id: 1, nama: "John"},
 { id: 2, nama: "Doe"},
 { id: 3, nama: "James"},
 ],
 };
 },
 metode: {
 hapusItem (kunci) {
 this.names.splice (kunci - 1, 1);
 },
 },
};
naskah>

Dalam contoh ini, Anda memiliki daftar item yang unik pengenal properti. Blok kode menggunakan kunci atribut dengan v-untuk direktif untuk melacak identitas setiap item dalam daftar. Ini memungkinkan Vue memperbarui DOM secara efisien saat daftar berubah.

Jika Anda menghapus item dari daftar, Vue akan memperbarui DOM tanpa harus merender ulang seluruh daftar. Ini karena Vue menyimpan identitas setiap item dalam daftar dan hanya dapat memperbarui item yang telah diubah.

Itu kunci atribut harus menjadi pengidentifikasi unik untuk setiap item dalam daftar. Ini bisa menjadi pengenal properti atau pengidentifikasi unik lainnya yang dapat digunakan untuk melacak item.

Menggunakan kunci atribut dengan v-untuk direktif membantu menghindari masalah rendering. Misalnya, saat menghapus nama, Vue menggunakan kunci atribut untuk mempertahankan urutan item dalam daftar.

Arahan Vue Sangat Penting

Di sini, Anda membahas dasar-dasar rendering daftar di Vue, termasuk menghapus item dari daftar dan merender daftar dengan kunci. Anda dapat membuat antarmuka responsif yang menangani daftar data kompleks dengan memahami konsep ini.

Vue memiliki sejumlah besar arahan untuk berbagai tujuan, termasuk rendering bersyarat, pengikatan peristiwa, dan pengikatan data. Memahami arahan ini dapat membantu Anda membuat aplikasi web interaktif yang efisien.