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

Question

我创建了一个 v-card，目的是保存一些 v-tab。在这些 v-tabs 中，我有一个 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，但是表单是硬编码的，而我是动态创建它们的。我怎样才能完成这项工作？

标签： vue.jsvuetify.js

Answer 1

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

1. 您使用Vuex并将所有表单数据保存在一个单一的，store.state 然后您有一个可以发送到后端的单一数据源。（强烈推荐的方式）

2. 使用父组件并$emit每个表单中的数据，直到您获得所需的数据以将其从您的父组件发送到您的后端。这里我为你做了一个例子。代码沙盒