主页 / 问题 / 1109239
Accepted
slobodianiukvitali
Asked:2020-04-12 20:27:35 +0000 UTC2020-04-12 20:27:35 +0000 UTC

通过单击删除块

  • 772

告诉我我在这里做了什么。我的任务是显示块，当我点击按钮时，我删除了这个块。谢谢

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>

vue.js

2 个回答

  1. Best Answer

    如果您确实想直接删除该块，请使用此选项。

    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>

    • 3 

  2. 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>

    • 1

相关问题