Saya belum menemukan pertanyaan yang membahas masalah ini menggunakan vuetify/vue. Saya memiliki tabel dinamis, dan pada halaman itu ada tombol tambahkan item. Mengklik tombol memunculkan dialog dengan tabel dinamis lainnya. Saya ingin dapat mengklik ikon tambah untuk setiap baris tabel tertentu. Mengklik ikon akan memindahkannya ke tabel dinamis asli.

Saya mencoba menggunakan sesuatu yang mirip dengan fungsi baris hapus. Saya akhirnya mendapatkan dua baris kosong yang ditambahkan, dengan kesalahan " Invalid prop: type check failed for prop "item". Objek yang Diharapkan, mendapat Angka dengan nilai 0"

Inilah yang saya miliki yang menciptakan kesalahan itu.

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();
 }
}
}
0
Denis J 10 Maret 2020, 19:27

1 menjawab

Jawaban Terbaik

Saya perlu menambahkan fungsi untuk menarik id dari baris. kemudian gunakan id itu untuk mendorong baris ke array lain.

Menambahkan:

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);
  }
}
0
Denis J 10 Maret 2020, 17:45