Nguồn:

Hướng Dẫn Sử Dụng v-for trong Vue.js

Tìm Hiểu Về Directive v-for trong Vue.js

Chào mừng bạn đến với bài viết trong series hướng dẫn về Vue.js! Trong bài viết này, chúng ta sẽ khám phá một directive rất phổ biến mà bạn sẽ thường xuyên gặp phải trong dự án Vue.js của mình: v-for.

Cơ Bản về Directive v-for

• Directive v-for được sử dụng để render dữ liệu từ một mảng. Cú pháp của v-for là item in items, với items là dữ liệu nguồn từ mảng và item là từng phần tử trong mảng được lặp lại để hiển thị. Ví dụ:

  Copy

  const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
  <li v-for="item in items">
    {{ item.message }}
  </li>

• v-for còn hỗ trợ một chỉ số để hiển thị vị trí hiện tại trong mảng.

• Bạn cũng có thể sử dụng từ khóa of hoặc in giống như trong JavaScript.

Sử Dụng v-for Với Object

Bạn có thể sử dụng v-for để lặp qua một object. Dữ liệu trả về sẽ bao gồm cả key và value của object.

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

Sử Dụng v-for Với Một Dãy Số

Ngoài ra, bạn có thể sử dụng v-for với một số nguyên, trong trường hợp này nó sẽ thực hiện lặp lại nhiều lần.

<span v-for="n in 10">{{ n }}</span>

Sử Dụng v-for Trong Template

Giống như v-if, bạn cũng có thể sử dụng template với v-for để hiển thị một nhóm 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>

Kết Hợp v-for và v-if

Khi v-if và v-for tồn tại trên cùng một phần tử, v-if sẽ có độ ưu tiên cao hơn. Điều này có nghĩa là v-if sẽ không truy cập vào các biến từ phạm vi của v-for. Do đó, bạn không nên sử dụng chúng trên cùng một phần tử.

<!--
Câu lệnh này sẽ sinh ra lỗi vì thuộc tính "todo" không được định nghĩa.
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

Giải pháp là thêm một phần tử chứa nhỏ hơn:

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

Sử Dụng v-for Với Components

Bạn có thể sử dụng v-for cho một component giống như các phần tử thông thường khác. Tuy nhiên, dữ liệu không được truyền vào component đó.

Thuộc Tính key Trong v-for 🔑

Trong Vue.js, thuộc tính key rất quan trọng và được sử dụng trong các vòng lặp như v-for để giúp Vue theo dõi và cập nhật các phần tử một cách hiệu quả hơn. 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 các phần tử 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 sử dụng key trong v-for?

• Cải Thiện Hiệu Năng: Vue có thể tối ưu hóa quy trình cập nhật khi sử dụng key, từ đó giảm thiểu các tính toán không cần thiết.
• Tránh Lỗi Không Mong Muốn: Việc sử dụng key giúp ngăn ngừa sai lệch trạng thái khi các phần tử được tái sử dụng một cách không chính xác.
• Cách Sử Dụng key: Giá trị của key nên là 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 ý về key:

1. Giá trị key phải duy nhất: Tránh sử dụng các giá trị không duy nhất như chỉ số (index) trừ khi bạn chắc chắn rằng danh sách sẽ không thay đổi.
2. Tránh sử dụng các giá trị phức tạp: Giá trị của key nên là chuỗi hoặc số, không nên sử dụng các đối tượng phức tạp.
3. 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 khi phát triển.

Phát Hiện Thay Đổi Trong Mảng

Trong Vue.js, Phát Hiện Thay Đổi Trong Mảng đề cập đến cách Vue theo dõi và phản hồi các thay đổi trong mảng. Do hạn chế của JavaScript, Vue không thể tự động phát hiện mọi loại thay đổi trong mảng. Dưới đây là một số thông tin cần biết về cách Vue xử lý sự thay đổi của mảng và những hạn chế cần khắc phục:

1. Cách Vue phản ứng 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:
   • Các phương thức thay đổi mảng: 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 sự thay đổi và cập nhật giao diện người dùng (UI) một cách tự động.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng directive v-for trong Vue.js, từ cơ bản đến nâng cao. Chúc bạn thành công trong việc phát triển ứng dụng với Vue.js!

source: viblo