Vue.js 通过在vuejs中弹出表单模式来编辑表中的特定行

我有一个带有编辑按钮和编辑表单对话框的表格：

<v-data-table
    v-bind:headers="headers"
    v-bind:items="packets"
    v-bind:search="search"
  >
  <template slot="items" scope="props">
    <td>
       {{ props.item.name }}
    </td>
    <td class="text-xs-right">{{ props.item.folder }}</td>
    <td class="text-xs-right">
        <EditPacketDialog></EditPacketDialog> <!-- #### NEED TO PASS IN PROPS DATA. HOW? -->
    </td>
  </template>
  <template slot="pageText" scope="{ pageStart, pageStop }">
    From {{ pageStart }} to {{ pageStop }}
  </template>
</v-data-table>

单击表格上的“编辑”按钮时要显示的表单：

<template>
  <v-layout right row >
    <v-dialog v-model="dialog" width="50%">
      <v-btn outline small fab slot="activator" class="indigo--text" @click="editPacket">
        <v-icon>edit</v-icon>
      </v-btn>
      <v-card>
        <v-card-title>
          <span class="headline">Edit Packet</span>
        </v-card-title>
        <v-card-text>
          <v-text-field label="Name" required></v-text-field><!-- #### SET THE FIELD -->
          <v-select
            label="Documents"
            multiple
            autocomplete
            chips
            :items="['WorkTime', 'Firm & Branch Financials', '2017 Firm Financial Letter', 'Systems Ideas', 'MyFirstDocument']"
          ></v-select>
          <small>*indicates required field</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn class="blue--text darken-1" flat @click.native="dialog = false">Close</v-btn>
          <v-btn class="blue--text darken-1" flat @click.native="dialog = false">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false
      }
    }
  }
</script>

---

由于对话框表单太大，我想将其与表代码分开，但是，我不确定如何将props.item.name和props.item.folder传递到子组件中。识别我要编辑的行/数据的正确方法是什么？

您可以这样向模板传递道具：

<EditPacketDialog v-bind:item="props.item"></EditPacketDialog>

然后在模板中，您需要接收一个名为item的道具。这将有item.folder和item.name供您在模板中使用