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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 26.03.2023

Как сделать так, что-бы по клику на 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>

Спасибо

javascript html vue.js

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

На мой взгляд, для задачи можно использовать 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/vue@2.7.0/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>

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

Ответы