通过在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>

由于对话框(表单)太大,我想将其从表代码中分离出来,但是,我不确定如何传递道具。项目名称和道具。项目将文件夹放入子组件中。识别要编辑的行/数据的正确方法是什么?