vuejs可重复使用的表单组件，用于添加和编辑

Question

我正在使用vuejs开发管理仪表板，我想问你如何重用组件来添加和编辑表单。

我的想法是我创建一个名为TradezoneForm.component.vue的组件，该组件是包含表单的，可以像这样在一侧添加数据

  <v-form v-model="valid" @submit.prevent="onFormSubmit" id="tradezone-form">
       <v-layout>
            <v-flex px-2>
              <v-text-field v-model="tradezoneData.name" label="ชื่อพื้นที่" required></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout>
            <v-flex px-2>
              <v-text-field v-model="tradezoneData.slug" label="slug" required></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout>
            <v-flex px-2>
              <v-select box v-model="tradezoneData.status" :items="statusList" label="เลือกสถานะ"></v-select>
            </v-flex>
          </v-layout>
          <v-btn type="submit" depressed form="tradezone-form" :disabled="!valid" color="primary">
          </v-btn>

在另一个vue文件中，我使用Tradezone组件进行编辑，例如...

   <v-expansion-panel popout>
      <v-expansion-panel-content v-for="(tradezone,i) in tradezoneList" :key="i">
        <h3 slot="header">{{tradezone.name}}</h3>
        <v-card>
          <v-card-text>
            <tradezone-form :tradezoneData="tradezone" @close="closeModal"></tradezone-form>
          </v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>

在同一文件中，我还使用贸易区组件添加新的贸易区，如..

<v-dialog v-model="showDialog" max-width="680px">
      <tradezone-form :tradezoneData="tradezoneBlank" @close="closeModal"></tradezone-form>
</v-dialog>

问题是，每当我按下TradezoneForm.component.vue中的“提交”按钮时，我仍然会获得空白的tradezoneData。

请帮我最好的方法，如何使用vuejs组件添加和编辑数据。

谢谢