如何创建动态表单vuejs vuetify？
Posted
技术标签:
【中文标题】如何创建动态表单vuejs vuetify？【英文标题】：How to create a dynamic form vuejs vuetify? 【发布时间】：2020-05-08 23:33:24 【问题描述】：我正在尝试制作一个动态表单来工作。 我有一系列的能力，在里面，我有一个技能阵列。整个能力的每一个技能都会被评估，所以它需要有一个答案。
一切都组织在具有动态步骤的 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: []
),
【问题讨论】：
【参考方案1】：首先有一些很好的 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>
或者您可以使用更好的想法，将答案分开，如下所示：
请参阅下文，了解我如何解决问题以获得这个想法：
【讨论】：
您好，感谢您的回答。关于表单生成器，实际上我没有太多时间学习如何使用它们，所以我更喜欢从头开始构建。我知道我可以这样使用 v 模型，但我的形式比这要复杂得多。我现在正在尝试使用计算属性将答案添加到数组中。没有太大的成功 好的，你能在github上提供一个复制品，以便更好地检查项目并尝试更好地帮助你吗？ ***.com/help/minimal-reproducible-example 由于公司的法律限制，我实际上无法使用Github。但是有时间我会尝试在我的个人电脑上复制 你好@SeyyedKhandon，我已经在我的个人 GitHub 上上传了一个版本，请查看github.com/felipe-kosouski/form-stepper，我仍然被困在这个问题上。现在的问题是我可以一步填写每个字段，但是当我更改其他字段的步骤（实际上是相同的，但对于其他对象）时，它会跟踪我向后填充的第一个字段。我不知道该怎么做。 我为您的问题添加了两个解决方案。所以检查一下。以上是关于如何创建动态表单vuejs vuetify？的主要内容，如果未能解决你的问题，请参考以下文章