Создать ряд компонентов

Question

Хотелось бы узнать, можно ли с помощью видения вызывать компонент определенное количество раз?

По сути, у меня есть переменная размера, которая инициализирована на 5, и я бы хотел, чтобы она была 5 раз компонент виджета.

Это мой текущий код:

Шаблон:

<template>
    <div v-for="item in size" :key="item">
        <Widget/>
    </div>
</template>

Скрипт:

import Widget from './Widget'
export default {
    data () {
        return {
            size: 5
        }
    },
    components: {
        Widget
    }
}

Я смотрел с v-for но я не понимаю, как это работает.

Answer 1

Компоненту разрешено иметь только один элемент root, поэтому v-for на самом внешнем элементе выдает ошибку, поскольку он создает несколько элементов root. Любой из них должен решить это для вас:

<template>
    <div>
        <div v-for="item in size" :key="item">
            <Widget/>
        </div>
    </div>
</template>

ИЛИ

<template>
    <div>
        <Widget v-for="item in size" :key="item" />
    </div>
</template>

Answer 2

Если вам нужно фиксированное количество виджетов, вы можете сделать это с помощью

<Widget v-for="number in 5" :key="number" />

Имейте в виду, v-for не допускается для элемента шаблона root компонента.