Удалять блок по клику на него

Question

Подскажи что я здесь намудрил. Моя задача в том что я вывожу блоки, а при клике на кнопку удаляю этот блок. Спасибо

new Vue({
	el: '#app',
	data: {
		desks:[]
	},
	methods: {
		deleteDesk(desk) {
			this.desks.splice(desk, 1);
		}
	}
})

<div id="app" >
	<div id="box" v-for="desk in desks">
		<button @click="deleteDesk(desk)">Delete</button>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi excepturi, modi saepe praesentium consequatur accusantium facilis ipsa eius magnam! Libero sunt quidem commodi nobis itaque earum nemo a, hic.</p>
	</div>
	<div id="box" v-for="desk in desks">
		<button @click="deleteDesk(desk)">Delete</button>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum id saepe qui aut fugit, aperiam inventore libero perspiciatis a ab? Repellendus, quo nam harum quos odio non praesentium voluptates deleniti.</p>
	</div>
	<div id="box" v-for="desk in desks">
		<button @click="deleteDesk(desk)">Delete</button>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vero voluptates delectus architecto cumque dolorem nam qui inventore est, quos eius odit similique ab corporis, ullam ipsa odio dolores consequuntur.</p>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Answer 1

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
    el: '#app',
    data: {
        desks:[
            { text: '1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi excepturi, modi saepe praesentium consequatur accusantium facilis ipsa eius magnam! Libero sunt quidem commodi nobis itaque earum nemo a, hic.' },
            { text: '2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi excepturi, modi saepe praesentium consequatur accusantium facilis ipsa eius magnam! Libero sunt quidem commodi nobis itaque earum nemo a, hic.' },
            { text: '3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi excepturi, modi saepe praesentium consequatur accusantium facilis ipsa eius magnam! Libero sunt quidem commodi nobis itaque earum nemo a, hic.' }
        ]
    },
    methods: {
        deleteDesk(desk) {
            this.desks.splice(desk, 1);
        }
    }
})

<div id="app" >
	<div class="box" v-for="(desc, index) in desks">
		<button @click="deleteDesk(index)">Delete</button>
		<p>{{ index }} - {{ desc.text }}</p>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Answer 2

Этот вариант если прям хочется сделать удаление блока напрямую.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
    el: '#app',
    data: {
        //desks:[]
    },
    methods: {
        deleteDesk(e) {
            const box = e.target.closest('.box');
            box.remove();
        }
    }
})

<div id="app" >
    <div class="box">
        <button @click="deleteDesk">Delete</button>
        <p>1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="box">
        <button @click="deleteDesk">Delete</button>
        <p>2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="box">
        <button @click="deleteDesk">Delete</button>
        <p>3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="box">
        <button @click="deleteDesk">Delete</button>
        <p>4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

БЛОГ НА HUSL

Удалять блок по клику на него

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