Question

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

<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传递给子组件。识别我想编辑的行/数据的正确方法是什么？

Answer 1

您可以将道具传递给模板，如下所示：

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

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

Check out the Vuejs documentation if you need help receiving the props in your template

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

1 个答案: