# Создание компонентов в цикле в Vue

Компоненты можно создавать в цикле, передавая им соответствующие данные. Давайте посмотрим, как это делается. Пусть в родительском компоненте дан следующий массив объектов:

`data() { return { users: [ { id: 1, name: 'name1', surn: 'surn1' }, { id: 2, name: 'name2', surn: 'surn2' }, { id: 3, name: 'name3', surn: 'surn3' }, ], } }`

Давайте переберем этот массив объектов циклом и в цикле будем создавать компоненты с юзерами:

`<template> <User v-for="user in users" /> </template>`

Укажем значения атрибута `key` для правильной работы цикла:

`<template> <User v-for="user in users" :key="user.id" /> </template>`

Передадим также в компоненты их данные, имя и фамилию каждого юзера:

`<template> <User v-for="user in users" :name="user.name" :surn="user.surn" :key="user.id" /> </template>`

Дан следующий массив с данными работников:

`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, }, ], } }`

С помощью цикла создайте на основе этого массива компоненты `Employee`, передав им соответствующие данные.

←→
↑