How to remove an item from a list with given ID in VueJS

Take a look at the DOCS on collection.. You can use the collect method on any array to convert it to collection then use Laravel in built collection methods like slice and pull or where to remove by key...

https://laravel.com/docs/5.3/collections

Thanks mate but I am trying remove the object from the Vue list. I do not need to interackt with the server at this point.

ooh ok... sorry I'm not into FrontEnd tho

You could use list.filter() (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). Something like this

var flist = list.filter( function(list_item) {
    return list_item.id !=itemID;
})

Try

this.list.$remove(itemID)

$remove seems to be depricated in VueJS 2

I have tryed:

let bla = list.find( (stack) => {
                return stack.id === itemID;
            });

So when I

console.log(bla); I got the object 

But when I

this.list.splice( bla, 1);

It removes allways the first element in the list, not the selected one.

Have to be careful with some methods on removing objects. Some don't actually delete it, some create a new object/array leaving the old old object still floating around.

The opposite of push() is remove().

http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object

I have tryed with

delete list[bla];

and

this.list.remove(bla);

But still no success.

when using {{splice}} the first argument is an index of array, not element itself

your code should be

let i = list.map(item => item.id).indexOf(itemID) // find index of your object
list.splice(i, 1) // remove it from array

@m7vm7v thanks. i made an update to the code.

Thanks @pittaya That is the right one with only one difference. No need of 'bla' just '1'. Thanks alot.

I'm new to Vue. I got this 'delete' method to work and I was hoping there was an easier/more elegant way to do it. Req_id is the record ID that I'm getting from a form and searching for in the Reqs list.

                trash_requirement(e) {
                    if (confirm("Are you Sure?")) {                 
                        var form = $(e.target); 
                        var reqId = e.target.req_id.value;
                        
                        for (req in this.reqs) {
                            var id = this.reqs[req].id;
                            if (id == reqId) {
                                Vue.delete(this.reqs, req); 
                            }
                        }
                        
                    }
                }