List Rendering (v-for) trong vuejs
Nguồn:
https://vuejs.org/guide/essentials/list.html
V-for trong vuejs :
Chào mừng các bạn quay trở lại với series VueJS của mình, ở bài này chúng ta sẽ đến với một directives nữa mà trong dự án rất hay dùng tới là v-for
Cơ bản về v-for :
- Chúng ta sử dụng v-for directive để render data của một array . V-for yêu cầu một cú pháp dạng item in items , với items là source data của array và item là từng phần tử trong mảng được lặp ra và hiển thị lên
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
<li v-for="item in items">
{{ item.message }}
</li>
- v-for hỗ trợ một index chỉ mục để hiển thị chỉ mục hiện tại
- v-for cũng có of , in giống như javascript
V-for with an Object :
Bạn cũng có thể sử dụng v-for để lặp qua một object . Data trả ra sẽ là key và value của object.
<li v-for="(value, key) in myObject">
{{ key }}: {{ value }}
</li>
V-for with a Range :
Bạn cũng có thể lặp v-for với một số nguyên , trong trường hợp này nó sẽ lặp nhiều lần
<span v-for="n in 10">{{ n }}</span>
V-for on template :
Tương tự như template v-if, bạn cũng có thể sử dụng template với v-for để hiển thị một khối gồm nhiều phần tử
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
v-for with v-if
Khi chúng tồn tại trên cùng một item, v-if có mức độ ưu tiên cao hơn v-for. Điều đó có nghĩa là v-if sẽ không có quyền truy cập vào các biến từ phạm vi của v-for. Không nên sử dụng v-if và v-for trên cùng một phần tử .
<!--
This will throw an error because property "todo"
is not defined on instance.
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>
Giải pháp ở đây là thêm 1 phần tử chứa nhỏ hơn :
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
v-for with a Component
Bạn cũng có thể dùng v-for cho một component như bất kì phần tử bình thường nào . Tuy nhiên các data này sẽ ko được truyền đến thành phần
Thuộc Tính key Trong v-for 🔑
Trong Vue.js, key là một thuộc tính quan trọng được sử dụng trong các vòng lặp như v-for để giúp Vue theo dõi các phần tử hiệu quả hơn. Cụ thể, key cung cấp một định danh duy nhất cho mỗi phần tử trong danh sách, giúp Vue xác định chính xác phần tử nào cần được cập nhật, thêm mới, hoặc xóa khi danh sách thay đổi.
Tại sao cần key trong v-for? Khi sử dụng v-for, Vue cần xác định và theo dõi từng phần tử trong danh sách. Nếu không có key, Vue có thể sử dụng một cách tiếp cận mặc định ít tối ưu hơn, như dựa vào thứ tự của các phần tử. Điều này có thể dẫn đến:
- Hiệu năng kém : Vue phải tính toán lại nhiều hơn khi danh sách thay đổi.
- Lỗi không mong muốn : Sai lệch trạng thái khi các phần tử bị tái sử dụng không đúng cách.
- Cách sử dụng key : key thường được gán giá trị duy nhất cho mỗi phần tử, chẳng hạn như id hoặc một thuộc tính độc nhất của đối tượng trong danh sách.
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" },
],
};
},
};
</script>
Lưu ý:
- Giá trị key phải duy nhất: Tránh sử dụng giá trị không duy nhất, ví dụ như chỉ số (index), trừ khi bạn chắc chắn rằng danh sách sẽ không thay đổi về mặt thứ tự hoặc nội dung.
- Tránh các giá trị phức tạp: Giá trị của key nên là một chuỗi hoặc số, không nên sử dụng các đối tượng phức tạp.
- Cảnh báo nếu thiếu key: Nếu không cung cấp key trong v-for, Vue sẽ đưa ra cảnh báo trong chế độ phát triển.
Array Change Detection
Trong Vue.js, Array Change Detection đề cập đến cách Vue theo dõi và phản hồi các thay đổi trong mảng (array). Do JavaScript hạn chế, Vue không thể tự động phát hiện mọi loại thay đổi trong mảng. Dưới đây là những điều cần biết về cách Vue xử lý sự thay đổi của mảng và cách khắc phục một số hạn chế. 1. Vue phản ứng như thế nào với mảng? Vue theo dõi các thay đổi trong mảng bằng cách ghi đè một số phương thức thay đổi mảng gốc của JavaScript, bao gồm:
Phương thức thay đổi mảng (mutating methods): push() pop() shift() unshift() splice() sort() reverse() Khi sử dụng các phương thức này, Vue sẽ phát hiện thay đổi và cập nhật giao diện người dùng (UI) tự động.
All rights reserved
