Tạo các component trong vòng lặp trong Vue
Các component có thể được tạo trong vòng lặp bằng cách truyền dữ liệu tương ứng cho chúng. Hãy xem cách thực hiện điều này. Giả sử trong component cha có mảng đối tượng sau:
data() {
return {
users: [
{
id: 1,
name: 'name1',
surn: 'surn1'
},
{
id: 2,
name: 'name2',
surn: 'surn2'
},
{
id: 3,
name: 'name3',
surn: 'surn3'
},
],
}
}
Hãy lặp qua mảng đối tượng này và trong vòng lặp, chúng ta sẽ tạo các component hiển thị thông tin người dùng:
<template>
<User v-for="user in users" />
</template>
Hãy chỉ định giá trị cho thuộc tính key
để vòng lặp hoạt động chính xác:
<template>
<User v-for="user in users" :key="user.id" />
</template>
Cũng hãy truyền dữ liệu của họ vào các component, tên và họ của mỗi người dùng:
<template>
<User
v-for="user in users"
:name="user.name"
:surn="user.surn"
:key="user.id"
/>
</template>
Cho mảng dữ liệu nhân viên sau:
data() {
return {
users: [
{
id: 1,
name: 'name1',
salary: 100,
age: 30,
},
{
id: 2,
name: 'name2',
salary: 200,
age: 40,
},
{
id: 3,
name: 'name3',
salary: 300,
age: 50,
},
],
}
}
Sử dụng vòng lặp, hãy tạo các component
Employee dựa trên mảng này,
truyền dữ liệu tương ứng cho chúng.
