时间戳

首页 > 解决方案 > 如何创建动态表单vuejs vuetify？

javascript - 如何创建动态表单vuejs vuetify？

问题描述

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

一切都组织在具有动态步骤的 v-stepper 中，并且我的表单字段是由 v-for 生成的。对于每个技能的答案需要有，也许像一个数组

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

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

这是我的代码

<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: []
  }),

标签： javascriptvue.jsvue-componentvuetify.js

解决方案

首先有一些很好的 vuejs-vuetify 表单生成器，它基于标准的 json-schema。

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

https://github.com/koumoul-dev/vuetify-jsonschema-form

https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/?example=basic

如果你想从头开始写一些项目，你应该考虑这个想法很简单，就像在表格中渲染一个内联编辑（通过对象传递使用引用）：见下面的例子： 在此处输入图像描述

观察逻辑，你应该正确索引，当我调试你的代码时，代码总是引用至少回答 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>

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

请参阅下文，了解我如何解决问题以获得这个想法： 在此处输入图像描述 在此处输入图像描述

推荐阅读