Move row from one dynamic table to another dynamic table in vuetify - vue.js

Question

I haven't found a question that addresses this problem using vuetify/vue.
I have a dynamic table, and on that page is an add item button. Clicking button pops up a dialog with anther dynamic table. I want to be able to click an add icon for each specific table row. Clicking the icon would move it to the original dynamic table.
I tried using something similar to the delete row function. I ended up getting two empty rows added, with the error " Invalid prop: type check failed for prop "item". Expected Object, got Number with value 0"
Here is what I have that creates that error.
HTML
<v-data-table
:headers="headers"
:items="agents"
sort-by="calories"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="800px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">Add Agent</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">New Agent</span>
</v-card-title>
<v-data-table :headers="headers2" :items="newAgents">
<template v-slot:item.action="{ item }">
<v-icon small #click="addItem(item)">
mdi-plus-circle-outline
</v-icon>
</template>
</v-data-table>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="close">Cancel</v-btn>
<v-btn color="blue darken-1" text #click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.action="{ item }">
<v-icon small #click="deleteItem(item)">
mdi-delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" #click="initialize">Reset</v-btn>
</template>
import axios from "axios";
export default {
data: () => ({
dialog: false,
isLoading: true,
headers: [
{ text: "Host IP Address", value: "host_ip" },
{ text: "Hostname", value: "host_name" },
{ text: "Agent Version", value: "agent_version" },
{ text: "Agent Install Location", value: "install_location" },
{ text: "Agent Status", value: "agent_status" },
{ text: "Actions", value: "action", sortable: false }
],
headers2: [
{ text: "Host IP Address", value: "host_ip" },
{ text: "Hostname", value: "host_name" },
{ text: "Agent Version", value: "agent_version" },
{ text: "Agent Install Location", value: "install_location" },
{ text: "Agent Status", value: "agent_status" },
{ text: "Add", value: "action", sortable: false }
],
agents: [],
newAgents: []
}),
watch: {
dialog(val) {
val || this.close();
}
},
created() {
this.initialize();
axios
.get("https://my.api.mockaroo.com/add_new_agent.json?key=88c9bdc0")
.then(res => (this.newAgents = res.data))
.then(res => {
console.log(res);
})
.catch(err => console.log(err));
},
methods: {
initialize() {
this.agents = [
{
host_ip: "Frozen Yogurt",
host_name: 159,
agent_version: 6.0,
install_location: 24,
agent_status: 4.0
},
{
host_ip: "Ice cream sandwich",
host_name: 237,
agent_version: 9.0,
install_location: 37,
agent_status: 4.3
}
];
},
changeColor() {
this.isLoading = !this.isLoading;
},
deleteItem(item) {
const index = this.agents.indexOf(item);
confirm("Are you sure you want to delete this item?") &&
this.agents.splice(index, 1);
},
addItem(item) {
const index = this.newAgents.indexOf(item);
confirm("Are you sure you want to add this item?") &&
this.agents.push(index, 1);
},
close() {
this.dialog = false;
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
}, 300);
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.agents[this.editedIndex], this.editedItem);
} else {
this.agents.push(this.editedItem);
}
this.close();
}
}
}

Answer 1

I need to add a function to pull the id from the row. then use that id to push the row into another array.
added:
addItem(item) {
this.newAgentId(item.id);
console.log(item);
confirm("Are you sure you want to add this item?") &&
this.agents.push(item);
},
newAgentId(keyID) {
if (this.selectedRows.includes(keyID)) {
this.selectedRows = this.selectedRows.filter(
selectedKeyID => selectedKeyID !== keyID
);
} else {
this.selectedRows.push(keyID);
}
}