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>