Vue.js 在vuetify中将行从一个动态表移动到另一个动态表

我还没有找到使用vuetify/vue解决此问题的问题。 我有一个动态表，该页面上有一个添加项按钮。点击按钮弹出另一个动态表格对话框。我希望能够单击每个特定表行的添加图标。单击图标会将其移动到原始动态表

我尝试使用类似于delete row函数的东西。最后，我添加了两个空行，错误为“无效属性：属性“item”的类型检查失败”。预期对象，获取值为0的数字

这就是我所拥有的造成错误的东西

HTML

---

我需要添加一个函数来从行中提取id。然后使用该id将该行推入另一个数组

增加：

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);
  }
}

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();
 }
}
}

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);
  }
}