Как удалить компонент при клике на него на vue.js?

Question

[faynster]

Есть родительский компонент

<template>

    <component v-for="n in blocks" :is="n" @remove="removeBlock" >
    </component>
    
    <div class="mainBtn">
        <btn-addblock-1 
            v-for="n in blockTypes" 
            @click="addBlock(n)" 
            class="btnAddblock"
        />
        </div>
    
</template>


<script>
import MainBlock from './components/mainBlock.vue'


export default{
    components:{
        MainBlock,
    },
    data: () => ({ 
        blocks: [],
        blockTypes: ['block-item1', 'block-item2', 'block-item3', 'block-item4', 'block-item5', 'block-item6',]
    }),
    methods: {
        addBlock(n){
            this.blocks.push(n)
            console.log(this.blocks)
        },
        removeBlock() {
            this.blocks = this.blocks.filter(p => p.id !== this.id)
            console.log(this.blocks)

        },
    }

}
</script>

И дочерний компонент

<template>
    <div class="block" v-bind:id="id">
        <div class="block__item1">
            <changeItem/>

            <PhotoUploader/>
        </div>

        <btn-delete
            @click="removeBlock()"
            class="btnDelete"
        />
    </div>
</template>

<script>
export default {
    name: 'blockItem1',
    data: () => ({   
        id : Date.now(),   
    }),
    methods: {
        removeBlock(){
            this.$emit('remove')
        }
    }
}
</script>

Как сделать так что бы удалялся компонент при нажатии На данный момент удаляются все созданные компоненты а не конкретно выбранный?

Answer 1

[Wispik]

Нужно в функцию removeBlock передавать сам элемент

<component v-for="n in blocks" :is="n" @remove="removeBlock(n)" >

...

removeBlock(el) {
       this.blocks = this.blocks.filter(p => p.id !== el.id)
       console.log(this.blocks)

}

Comments

[Александр]

Это я понял, но как передавать конкретный выбранный блок я не могу разобраться

[Wispik]

Александр, так я же написал, как передать

[faynster]

Wispik, я сделал как Вы посоветовали, но удаляются все равно все созданные компоненты.


Вот в консоли можно видеть: я три раза добавлял компонент
Proxy {0: 'block-item1'} - первый раз нажал на кнопку
Proxy {0: 'block-item1', 1: 'block-item2'} - второй раз
Proxy {0: 'block-item1', 1: 'block-item2', 2: 'block-item3'} - третий раз
А потом в block-item1 нажал кнопку удалить и удалились все компоненты:
но блок передается передается, как я понял
я его вывожу перед тем как удалить

removeBlock(el) {
            console.log(el);
            this.blocks = this.blocks.filter(p => p.id !== el.id)
            console.log(this.blocks);
        },

[Wispik]

faynster, а, ну правильно, я не заметил сначала, у всех элементов id одинаковый, надо id при создании добавлять

addBlock(n){
    this.blocks.push({
        id: Date.now(),
        typeBlock: n
    }
)},

ну и в других местах соответственно код поправить, подо текущий вид переменной blocks

[faynster]

Wispik, да получилось, подредачил :is

<component v-for="n in blocks" :is="n.typeBlock" @remove="removeBlock(n)"> 
  </component>

Спасибо большое