Vue, добавление компонента по клику

Question

Как сделать так, что-бы по клику на NewComponent в шаблон добавился компонент Component, перед NewComponent ?

//До вызова функции NewComponent 
<template id="app">
  <Component/>

  <NewComponent v-on:click="NewComponent "/>
</template>

//После вызова функции NewComponent
<template id="app">
  <Component/>
  <Component/>
  <NewComponent v-on:click="NewComponent "/>
</template>

Спасибо

Answer 1

На мой взгляд, для задачи можно использовать component в связке c v-for при желании так можно добавлять разные компоненты формируя содержимое, например параграфы и заголовки.

Vue.component("child-component", {
    template: "<div>Component-{{this.msg}}</div>",
    props: ['msg'],
});
new Vue({
    el: "#app",
    data() {
        return {
            items: [],
            componentName: 'child-component'
        }
    },
    methods: {
        newComponent(){
            this.items.push({message: this.items.length})
        }
    },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
    <component 
        v-for="item in items" 
        :key="item.message" 
        :msg="item.message" 
        :is="componentName">
    </component>
    <button v-on:click="newComponent">OK</button>
</div>

БЛОГ НА HUSL

Vue, добавление компонента по клику

Ответы (1 шт):