Đổ một mảng thẻ ra bảng trong OWL: t-foreach, và vì sao t-key không phải trang trí

Ba con số trên dashboard là dữ liệu tổng hợp. Nhưng phần lớn giao diện thật là danh sách — bốn thẻ, mỗi thẻ một dòng. Trong OWL, bạn lặp qua một mảng bằng t-foreach để dựng ra từng dòng. Nghe đơn giản, nhưng có một thuộc tính bắt buộc mà nhiều người coi là trang trí rồi trả giá: t-key. Bài này dựng một bảng thẻ thật và chỉ ra vì sao t-key phải là id, không phải chỉ số.

Lấy mảng, rồi lặp

Đầu tiên giữ nguyên mảng dữ liệu trong state (không cần biến đổi thủ công), rồi để t-foreach lặp:

Hình 1: this.state.cards = cards giữ nguyên mảng từ searchRead. Template lặp bằng t-foreach="state.cards" t-as="card" — mỗi vòng, card là một phần tử. OWL còn cấp sẵn biến phụ: card_index (số thứ tự từ 0), card_first, card_last. Và t-att-class="biểu thức" gán class động — ở đây tô vàng dòng thẻ hạng Vàng. Nhưng chú ý nhất là t-key="card.id".

Kết quả: bảng thẻ thật

Render dashboard, bảng hiện đủ bốn thẻ với đánh số và dòng vàng được tô màu:

Hình 2: Bảng do t-foreach dựng, dữ liệu thật từ ORM. Bốn dòng, card_index + 1 cho số thứ tự 1–4, và dòng VIP-0003 (Vàng) được tô nền vàng nhạt nhờ t-att-class xét card.hang_the === 'vang'. Đây là cách chuẩn hiển thị danh sách trong một component tự vẽ — không phải view list có sẵn, mà từng ô do template của ta điều khiển. Chụp bằng trình duyệt thật, không có lỗi Console.

t-key: id, không phải chỉ số

Đây là chỗ dễ trả giá. t-key bắt buộc trong mọi t-foreach, và nó phải là một định danh ổn định theo bản ghi:

Hình 3: t-key là cách OWL nhận ra "phần tử này ứng với DOM node nào" khi mảng thay đổi. Dùng card.id (ổn định theo bản ghi): khi danh sách sắp xếp lại hay chèn/xoá, OWL tái dùng đúng node, giữ nguyên trạng thái (ô nhập đang gõ, dòng đang focus). Dùng card_index (theo vị trí): chèn một dòng vào giữa là mọi node sau đó bị gán nhầm — trạng thái nhảy lung tung. Chỉ dùng chỉ số khi danh sách tĩnh tuyệt đối.

Vài lưu ý khi lặp trong OWL

• Thiếu t-key là lỗi — nổ ở trình duyệt (Console), server không báo. Luôn khai, luôn ưu tiên id.
• Biến phụ theo tên vòng lặp: nếu t-as="card" thì có card_index, card_first, card_last. Lặp qua object (không phải mảng) thì thêm card_value là giá trị, còn card là khoá.
• Lặp lồng nhau được, mỗi cấp một t-foreach + t-key riêng; đảm bảo key duy nhất trong phạm vi của nó.
• t-att-<attr> cho thuộc tính động: t-att-class, t-att-style, t-att-href... nhận biểu thức JS; còn t-attf-<attr> cho nội suy chuỗi (t-attf-class="row-{{card.id}}").

Ba ý mang về

1. t-foreach="mảng" t-as="item" dựng danh sách trong OWL; biến phụ item_index/item_first/item_last có sẵn, và t-att-<attr> gán thuộc tính động theo biểu thức.
2. t-key là bắt buộc và nên là id bản ghi (ổn định), không phải chỉ số — để OWL tái dùng đúng DOM khi danh sách sắp xếp/chèn/xoá, giữ nguyên trạng thái.
3. Thiếu t-key hay dùng chỉ số sai chỗ gây lỗi/bug ở trình duyệt; chỉ dùng chỉ số khi danh sách tĩnh tuyệt đối.

Bảng đã hiện, nhưng vẫn tĩnh — nạp xong là thôi. Điều làm OWL "sống" là khi dữ liệu đổi thì giao diện tự vẽ lại. Phần sau đào sâu useState và trạng thái phản ứng: vì sao gán this.state.x làm UI cập nhật, còn this.x thì không.