Допустим, есть некий контейнер вида:
<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:
Завёл массив элементов, в который добавляю все необходимые элементы. Вот
тут исправленный пример.
Простой