Как программно добавить компонент в контейнер во Vue.js?

Question

[Кирилл]

Допустим, есть некий контейнер вида:

<div id="container">
    <div class="clearfix">
        <custom-element :bg="'red'"></custom-element>
        <custom-element :bg="'green'"></custom-element>
        <custom-element :bg="'blue'"></custom-element>
    </div>
    <p>
        <button @click="addNewElement">Добавить элемент</button>
    </p>
</div>

И такой JavaScript-код:

const app = new Vue({
	el: '#container',
    components: {
		'custom-element': {
			template: '<div class="box" :style="{background: bg}"></div>',
            props: ['bg']
        }
    },
    methods: {
    	addNewElement: function() {
        
        }
    }
})

Живой пример тут.

Как во Vue.js сделать, чтобы при нажатии на "Добавить элемент", добавлялся новый компонент custom-element в контейнер #container? Правильно ли будет, если в методе addNewElement() я буду использовать стандартные методы работы с DOM-деревом? Например, createElement() и т.д.

*UPDATE:
Завёл массив элементов, в который добавляю все необходимые элементы. Вот тут исправленный пример.

Answer 1

[Сергей delphinpro]

Правильно ли будет, если в методе addNewElement() я буду использовать стандартные методы работы с DOM-деревом?

Конечно нет.

Почему бы вам не хранить данные компонентов в data? И соответственно выводить их циклом. Добавление компонента будет сводится к добавлению элемента в список.

Ну по крайней мере на первый взгляд это кажется правильным. Не зная точной задачи.

Comments

[Кирилл]

Обновил вопрос. Посмотрите ссылку, так правильнее?

[Сергей delphinpro]

Кирилл, Суть верная.
Я такой пример сделал https://codepen.io/anon/pen/Nwovqj (почти то же самое)

[Кирилл]

Сергей, да. Спасибо за подсказку!