Push object to array of objects on click

Question

I have a vue.js app that has objects being rendered in a single list with two columns as shown below:

When I click on the "X" on the object, I get the following return:

The method is shown below:

remove(x) {
    console.log(this.$data.list.selected[x]);
    console.log(this.$data.list.available);
    console.log(x);
},

The this.$data.list.selected[x] is the object in the left column, and the array of objects is in this.$data.list.available .

What would be the best way for me to remove the object inside my method and then push it to the end of the array in this.$data.list.available ?

Answer 1

You could splice the item to remove it from this.$data.list.selected[] , and push it into this.$data.list.available[] :

this.$data.list.available.push(...this.$data.list.selected.splice(x, 1))