@faynster

Как создавать новые div при клике на кнопку через vue.js?

У меня есть несколько кнопок, при клике на каждую создается див с разной дом архетектурой который хранятся в одном компоненте:
клик на 1 кнопку - див с одной дом архитектурой
клик на 2 - кнопку див с другой архитектурой
клик на 3 - див с третьей
и тд.
Только начал познавать vue, поэтому толком не шарю как правильно что делать. Как можно реализовать мою задачу что бы при клике на кнопку создавались новые дивы в другом компоненте

addblock.vue компонент (там где находятся кнопки)
<template>
    <div class="addblock">
        <btnAddblock1 class="btn-addblock"
            @click="addblock1"
        />
        <btnAddblock2 class="btn-addblock"/>
        <btnAddblock3 class="btn-addblock"/>
        <btnAddblock4 class="btn-addblock"/>
        <btnAddblock5 class="btn-addblock"/>
        <btnAddblock6 class="btn-addblock"/>
    </div>
</template>

<script>
export default {
    data(){
        return{
            blocks:[
                
            ]
        }
    },
    methods:{
        addblock1(){
            const newBlock1 = {
                id: Date.now(),
            }
            this.posts.push(newBlock1)
        }
    }
    
}
</script>


block.vue (компонент (там где появляются новые div при клике) )
<template>
    <div>
        <h1>Новый блок</h1>
    </div>
</template>

<script>
export default {
    
}
</script>
  • Вопрос задан
  • 421 просмотр
Пригласить эксперта
Ответы на вопрос 1
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Я может чего не понимаю но.
создаете для каждой кнопки компонент используя v-show или v-if показываете этот компонент по клику.

Другой вариант это список.
Клик на кнопке добавляет в конец элемент.
{id: 56,: elType: 'box', ....}

В рендерере списка вы в зависимости от elType рендерите нужный компонент
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы