Javascript 如何创建动态表单vuejs vuetify？

我正在尝试制作一个动态的表单来工作。 我有一系列的能力，在我的内心，我有一系列的技能。整个能力的每一项技能都将被评估，所以它需要有一个答案

所有内容都组织在带有动态步骤的v-stepper中，我的表单字段由v-for生成。对于每个技能，答案都需要具备，可能是一个数组，如

answers: [
  skillId:
  skillLevel:
  feedback:
  feedforward:
  ...
]

我的问题是，作为动态生成的表单，如何为每个字段设置v模型？因为一个能力可以有很多技能，所以模型需要不同才能绑定

这是我的密码

<template>
  <v-stepper v-model="e1" :appraisal="appraisal">
    <v-stepper-header>
      <template v-for="n in steps">
        <v-stepper-step :key="`${n}-step`" :step="n" :complete="e1 > n" editable></v-stepper-step>
        <v-divider v-if="n !== steps" :key="n"></v-divider>
      </template>
    </v-stepper-header>
    <v-stepper-items>
      <v-stepper-content v-for="n in steps" :key="`${n}-content`" :step="n">
        <v-row align="center" justify="center">
          <v-col cols="4">
            <v-subheader class="headline">{{appraisal.appraisalCompetences[n-1].competence.name}}</v-subheader>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12">
            <v-row justify="center">
              <v-col cols="3">
                <v-subheader class="title">Fatores</v-subheader>
              </v-col>
              <v-col cols="2">
                <v-subheader class="title">Presença da competência</v-subheader>
              </v-col>
              <v-col cols="2">
                <v-subheader class="title">Feedback do Gestor</v-subheader>
              </v-col>
              <v-col cols="2">
                <v-subheader class="title">Auto Avaliação</v-subheader>
              </v-col>
              <v-col cols="3">
                <v-subheader class="title">Feedforward</v-subheader>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
        <v-divider></v-divider>
        <template v-for="competence in appraisal.appraisalCompetences[n-1]">
          <v-form :key="`${competence.competenceId}-form`">
            <v-row v-for="(item, index) in competence.competenceSkills" :key="index">
              <v-col cols="12">
                <v-row class="mb-n10" justify="center">
                  <v-col cols="3" class="mt-4">
                    <span>{{item.skill.name}}</span>
                  </v-col>

                  <v-col cols="2">
                    <v-select
                      v-model="answers.skillLevel"
                      outlined
                      :items="selectLevels"
                      :name="`skill-level-${item.skill.skillId}`"
                      label="Selecione"
                      item-text="level"
                      item-value="value"
                    ></v-select>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea outlined rows="3" :name="`skill-feedback-${item.skill.skillId}`"></v-textarea>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea
                      outlined
                      rows="3"
                      :name="`skill-selfappraisal-${item.skill.skillId}`"
                    ></v-textarea>
                  </v-col>
                  <v-col cols="3">
                    <v-textarea outlined rows="3" :name="`skill-feedforward-${item.skill.skillId}`"></v-textarea>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-form>
        </template>
        <v-row>
          <v-col cols="12">
            <v-row align="center" justify="space-between">
              <v-btn tile large color="error" @click="previous(n)">
                <v-icon dark left>mdi-arrow-left</v-icon>Voltar
              </v-btn>

              <v-btn tile large color="success" @click="next(n)">
                Continuar
                <v-icon dark right>mdi-arrow-right</v-icon>
              </v-btn>
            </v-row>
          </v-col>
        </v-row>
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>

其他技能也是如此。在用户为“能力”中的每项技能键入答案后，我需要对“能力2”进行同样的操作，以此类推。 问题在于表格的答案部分，我不知道如何将每一行计算为一个答案，然后将它们添加到一系列答案中

这就是我到目前为止提到的

{{item.skill.name}

导出默认值{
数据：（）=>({
e1:1，
步骤：1，
估价：[]，
选择级别：[
{值：0，级别：“Ausente”}，
{值：1，级别：“A Desenvolver”}，
{值：2，级别：“Satifatória”}，
{值：3，级别：“Excellencia”}，
{值：4，级别：“Nãse aplica”}
],
答复:{
能力ID:“”，
斯基利德：“，
技能水平：“，
反馈：“，
自我评价：“，
前馈：“”
},
答案：[]
}),

首先，有一些很好的vuejs vuetify就绪表单生成器，它基于标准json模式

请参阅下面的示例和项目，特别是github代码，了解有关如何创建良好表单生成器的更多详细信息和想法，以便您可以使用它们

如果你想从SCARCH写一些项目，你应该认为这个想法很简单，就像在表中渲染一个内联的编辑（通过使用对象传递的折中）： 请参见以下示例：

注意逻辑，你应该正确地索引，当我调试你的代码时，代码总是引用至少0到5的答案，所以你不能让它工作。 请仔细阅读以下内容以解决您的问题：

  <v-col cols="2">
                    <v-select
                      v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length ].skillLevel"
                      outlined
                      :items="selectLevels"
                      label="Selecione"
                      item-text="level"
                      item-value="value"
                    ></v-select>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].feedBack" outlined rows="3"></v-textarea>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].selfAppraisal" outlined rows="3"></v-textarea>
                  </v-col>
                  <v-col cols="3">
                    <v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].feedForward" outlined rows="3"></v-textarea>
                  </v-col>

或者您可以使用更好的方法，将答案分开，如下所示：

请参阅下面的内容，了解我是如何解决问题的：

---

您好，谢谢您的回答。关于表单生成器，实际上我没有太多时间学习如何使用它们，所以我倾向于从头开始构建。我知道我可以这样使用v模型，但我的表单比这更复杂。我正在尝试使用计算属性向数组添加答案。没有太多成功OK，c你可以在github中提供复制品，以便更好地检查项目并尝试更好地帮助你吗？事实上，由于公司的法律限制，我不能使用github。但我会尝试在我的个人电脑上复制。有时间的话Hello@SeyyedKhandon，我已经在我的个人github中上载了一个版本，请查看，我仍然困在是的。现在的问题是，我可以在一个步骤中填充每个字段，但是当我更改其他字段的步骤时（实际上是相同的，但对于其他对象），它会跟踪我一步一步地填充的第一个字段。我不知道如何继续。我为您的问题添加了两个解决方案。因此请检查它。

  skillId:
  skillLevel:
  feedback:
  feedforward:
  ...

  <v-col cols="2">
                    <v-select
                      v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length ].skillLevel"
                      outlined
                      :items="selectLevels"
                      label="Selecione"
                      item-text="level"
                      item-value="value"
                    ></v-select>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].feedBack" outlined rows="3"></v-textarea>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].selfAppraisal" outlined rows="3"></v-textarea>
                  </v-col>
                  <v-col cols="3">
                    <v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].feedForward" outlined rows="3"></v-textarea>
                  </v-col>