如何在v-tab中处理来自多个v-form的数据

Question

我创建了一个v形卡，目的是容纳一些v形选项卡。在这些v形标签里面，我有一个v形。这些表格与进口产品相对应，因为每个表格都是一个组件。表单的目标是让用户完成每个表单中的所有字段，这最终将创建"；问题"；其必须被发送到数据库。这意味着我需要连接所有表单中的所有信息。现在我有这样的东西：

<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

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

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

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