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

Question

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

我尝试使用类似于删除行功能的东西。我最终添加了两个空行，并显示错误“无效的道具：道具“项目”的类型检查失败。预期的对象，得到值为 0 的数字”

这就是我所拥有的导致该错误的原因。

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

我需要添加一个函数来从行中提取 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);
  }
}