OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to remove an item from an array in Vue.js

  • Thread starter Thread starter Giesburts
  • Start date Start date
G

Giesburts

Guest
I am new to vue.js (2) and I am currently working on a simple event app. I've managed to add events but now I would like to delete events based on clicking on a button.

HTML

Code:
    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

JS(Vue)

Code:
new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' }
    },

    ready: function() {

    },

    methods: {

        deleteEvent: function(event) {
                this.events.splice(this.event);
        },

        // Adds an event to the existing events array
        addEvent: function() {
            if(this.event.name) {
                this.events.push(this.event);
                this.event = { name: '', description: '', date: '' };
            }
        }

    } // end of methods

});

I've tried to pass the event to the function and than delete that one with the slice function, I thought it was that code for deleting some data from the array. What is the best en cleanest way to delete data from the array with a simpleb button and onclick event?

<p>I am new to vue.js (2) and I am currently working on a simple event app. I've managed to add events but now I would like to delete events based on clicking on a button.</p>

<p>HTML</p>

<pre><code> <div class="list-group">

<div class="list-group-item" v-for="event in events">
<h4 class="list-group-item-heading">
{{ event.name }}
</h4>

<h5>
{{ event.date }}
</h5>

<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

<button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
</div>

</div>
</div>
</code></pre>

<p>JS(Vue)</p>

<pre><code>new Vue ({
el: '#app',

data: {
events: [
{
id: 1,
name: 'Event 1',
description: 'Just some lorem ipsum',
date: '2015-09-10'
},
{
id: 2,
name: 'Event 2',
description: 'Just another lorem ipsum',
date: '2015-10-02'
}
],

event: { name: '', description: '', date: '' }
},

ready: function() {

},

methods: {

deleteEvent: function(event) {
this.events.splice(this.event);
},

// Adds an event to the existing events array
addEvent: function() {
if(this.event.name) {
this.events.push(this.event);
this.event = { name: '', description: '', date: '' };
}
}

} // end of methods

});
</code></pre>

<p>I've tried to pass the event to the function and than delete that one with the slice function, I thought it was that code for deleting some data from the array. What is the best en cleanest way to delete data from the array with a simpleb button and onclick event?</p>
 

Latest posts

L
Replies
0
Views
1
Lavínia Beghini
L
Top