如何创建动态表单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>

<script>
export default {
  data: () => ({
    e1: 1,
    steps: 1,
    appraisal: [],
    selectLevels: [
      { value: 0, level: "Ausente" },
      { value: 1, level: "A Desenvolver" },
      { value: 2, level: "Satifatória" },
      { value: 3, level: "Excelencia" },
      { value: 4, level: "Não se aplica" }
    ],
    answers: [
      {
        competenceId: "",
        appraisalId: "",
        skillId: "",
        skillLevel: "",
        feedback: "",
        selfAppraisal: "",
        feedforward: ""
      }
    ]
  }),
  created() {
    this.initialize();
  },
  methods: {
    initialize() {
      axios
        .get(`/questionnaire/appraisals/${this.$route.params.appraisalId}`)
        .then(response => {
          this.appraisal = response.data;
          this.steps = this.appraisal.appraisalCompetences.length;
        });
    },
    previous(n) {
      if (this.e1 == 1) {
        this.$router.push("/app/pdc");
      } else {
        this.e1 = n - 1;
      }
    },
    next(n) {
      if (n === this.steps) {
        this.e1 = 1;
      } else {
        this.e1 = n + 1;
      }
    }
  }
};
</script>

已编辑

让我尝试改善这个问题

以我的形式，对于每项能力，我都有一套将要评估的技能。因此，对于每种技能，我都需要有一个单独的答案，例如技能1

  skillId:
  skillLevel:
  feedback:
  feedforward:
  ...

其他所有技能，依此类推。在用户为能力中的每种技能键入答案后，我需要对能力2等进行相同的操作。问题在于表格的答案部分，我不知道如何将每一行都计为一个答案，然后将它们添加到答案数组中

这是我到目前为止提出的

<template v-for="competence in appraisal.appraisalCompetences[n-1]">
          <v-row v-for="(item, index) in competence.competenceSkills" :key="index">
            <v-col cols="12">
              <v-form :key="`${item.skillId}-form`">
                <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="`${item.skillId}-form`.skillLevel"
                      outlined
                      :items="selectLevels"
                      label="Selecione"
                      item-text="level"
                      item-value="value"
                    ></v-select>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea v-model="answer.feedback" outlined rows="3"></v-textarea>
                  </v-col>
                  <v-col cols="2">
                    <v-textarea v-model="answer.selfAppraisal" outlined rows="3"></v-textarea>
                  </v-col>
                  <v-col cols="3">
                    <v-textarea v-model="answer.feedForward" outlined rows="3"></v-textarea>
                  </v-col>
                </v-row>
              </v-form>
            </v-col>
          </v-row>
        </template>

export default {
  data: () => ({
    e1: 1,
    steps: 1,
    appraisal: [],
    selectLevels: [
      { value: 0, level: "Ausente" },
      { value: 1, level: "A Desenvolver" },
      { value: 2, level: "Satifatória" },
      { value: 3, level: "Excelencia" },
      { value: 4, level: "Não se aplica" }
    ],
    answer: {
      competenceId: "",
      skillId: "",
      skillLevel: "",
      feedback: "",
      selfAppraisal: "",
      feedForward: ""
    },
    anwers: []
  }),