Рендеринг списков с определенным числом элементов во Vue.js?

Question

[vetsmen]

Доброго времени суток. Есть объект с определенным количеством элементов (от 2 до 8)
Если в моем объекте 6 элементов, нужно в цикле вывести данные этих 6 элементов, а так же дополнительно отрендерить 2 элемента. В сумме должно получиться 8 элементов.
Делаю так:

<div v-for="item in items">
      <div>{{ item.title }}</div>
   </div>

Однако у меня всего выводится 6 элементов (ибо в объекте их 6, что логично). Как сделать так, чтобы в список добавилось еще два пустых элемента?
Была идея постоянно держать объект с 8 элементами, но с ним очень сложно работать, потому что данные очень часто добавляются в объект и удаляются. Получается, что при добавлении элемента в объект мне нужно будет удалять пустой элемент, а при удалении элемента из объекта мне нужно будет добавлять пустой. Такой себе способ. Есть решения?

Answer 1

[Vitaliy]

https://jsfiddle.net/50wL7mdz/88160/

Answer 2

[Klein Maximus]

Оформить computed-свойство (массив), в который добавлять недостающие элементы.
Это более декларативно, чем через метод. Кроме того, значение computed-свойства кэшируется.
https://jsfiddle.net/50wL7mdz/92505/

Answer 3

[Roman K]

two-way computed

Comments

[vetsmen]

Что-то типо такого пойдет?

selectedData() {
				let items = this.selectedItems;
				let itemsLength = Object.keys(items).length;
				if(itemsLength < 8) {
					for(let i = 1; i <= (8 - itemsLength); i++) {
						items[-i] = {};
					}
				}
				return items;
			}

Просто у меня в объекте каждому элементу присвоен положительный индекс, и чтобы избежать конфликтов, приходится прибегать к такому костылю