如何在 v-tabs 中处理来自多个 v-forms 的数据？

Question

我创建了一张 v-card，目的是保存一些 v-tab。在这些 v-tab 中，我有一个 v-form。这些表格对应于所做的进口，因为它们中的每一个都是一个组件。表单的目标是让用户完成每个表单中的所有字段，最终将创建必须发送到数据库的“问题”。这意味着我需要连接所有表格中的所有信息。目前我有这样的东西：

<v-card class="mt-2" elevation="10" >
  <v-tabs v-model="tab" centered show-arrows>
     <v-tab v-for="item in items" :key="item.tab">
         {{ item.tab }}
     </v-tab>
  </v-tabs>
  <v-tabs-items v-model="tab">
     <v-tab-item v-for="item in items" :key="item.tab"> 
          <component v-bind:is="item.content"></component>
     </v-tab-item>
  </v-tabs-items>
</v-card>

<script>
import Caracterizacao from '@/components/Caracterizacao';
import Pergunta from '@/components/Pergunta';
import Respostas from '@/components/Respostas';
import Suporte from '@/components/Suporte';
import Edicao from '@/components/Edicao';

export default {
  components: { 
        Caracterizacao, 
        Pergunta,
        Respostas,
        Suporte,
        Edicao
    }, 
  data() {
    return{
      tab: null,
      items: [
        { tab: 'Caracterizacão', content: 'Caracterizacao'},
        { tab: 'Pergunta', content: 'Pergunta'},
        { tab: 'Respostas', content: 'Respostas'},
        { tab: 'Suporte', content: 'Suporte'},
        { tab: 'Edição', content: 'Edicao'}
      ]
    }

  }
}
</script>

我看到了一个示例，其中我可以在创建每个表单时为每个表单设置 $refs，但是这些表单是硬编码的，而我是动态创建它们的。我怎样才能完成这项工作？

Answer 1

如果我现在没有误会你的话，你有两种可能的解决方案。

您使用 Vuex 并将所有表单数据保存在一个 store.state 中那么您就有了可以发送到后端的单一数据源。（强烈推荐的方式）
使用父组件和 $emit 每个表单中的数据，直到您获得所需的数据以将其从您的父组件发送到您的后端。在这里我为你做了一个例子。 CodeSandbox

如何在 v-tabs 中处理来自多个 v-forms 的数据？

How to handle data from multiple v-forms inside v-tabs?

vue.js

vuetify.js