Move row from one dynamic table to another dynamic table in vuetify

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

Denis J Denis J · Accepted Answer · 2020-03-10T17:45:04

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

Move row from one dynamic table to another dynamic table in vuetify

1 Answers