Как использовать шаблон несколько раз?

Question

[last_round]

Установил Vue, vueify, browserify через node.
Есть main.js (точка входа):

var Vue = require('vue');
var quality = require('./componets/quality.vue');

new Vue({
	el: '#qua',
	render: function(createElement) {
		return createElement(quality)	
	},
})

Подключается шаблон (quality.vue):

<template>
	<div class="qua-item">
    	<div class="qi-img qi-img1"></div>
    	<div class="separator"></div>
    	<div class="qi-text-head"></div>
    	<div class="qi-text">Excepteur sinto occaecat cupidatat non proident, sunt in culpa qui nam sint essent officia mollit.</div>
    </div>
</template>

Код в этом же файле:

module.exports = {
		data: function(){
			return {
				items: [
					{
						name: '123',
					},
					{
						name: '321',
					}
				],
			}
		}
	}

В главном файле (index.html) вывожу этот шаблон:
<div id="qua"></div>

Всё хорошо работает, выводится, но проблема в том что я хочу этот шаблон подключить несколько раз и понять не могу как. Пробовал дублировать <div id="qua"></div>
но это глупости, понимаю. Как мне кажется нужно через v-for или v-if (документацию читал) но понять не могу как. Помогите кто чем сможет, если нужны ещё какие-нибудь данные, то пишите в коменты.

Answer 1

[last_round]

Саму проблему в корне решить не могу, но есть обходной путь (может он и верный, но я хотел не этого), как я сделал (всё внутри файла *.vue):

<template>
	<div class="qua-item-list">
   		<div class="qua-item" v-for="item in items">
    		<div class="qi-img qi-img1">{{ item.name }}</div>
    		<div class="separator"></div>
    		<div class="qi-text-head">{{ item.status }}</div>
    		<div class="qi-text">Excepteur sinto occaecat cupidatat non proident, sunt in culpa qui nam sint essent officia mollit.</div>
    	</div>
    </div>
</template>

module.exports = {
		data: function(){
			return {
				items: [
					{
						name: '123', status: 'done!',
					},
					{
						name: '321', status: 'done!',
					}
				],
			}
		}
	}

Поясню как работает (вдруг кому-то не понятно будет): v-for проходит циклом каждый item и сколько item`ов столько и элементов на странице будет.

Answer 2

[Андрей Хохлов]

Используйте компоненты.
https://ru.vuejs.org/v2/guide/components.html

Comments

[last_round]

Не получается, пробую добавить внутрь файла - ошибка, пробую добавить в main.js пишет что должна быть render функция

[Андрей Хохлов]

last_round: у Vue настолько доступная и простая документация, что не получиться просто не может