Javascript 如何在vuetify中动态添加/删除具有select/autocomplete值的新表单行？

我已经为使用Vuejs和Vuetify的动态表单奋斗了一段时间。 首先，我有一个API，它可以向我返回能力和技能的价值，以添加到评估中。当创建一个新的评估时，我想分步显示表单，所以我使用v-stepper。问题是，在第三步中，用户需要选择他之前已经选择的能力之一，并且在他选择该能力之后，他需要向该能力添加技能，因此一个能力可以有多个技能

我想做的是，在步骤2中，我有一个select来填充SelectedCompetencies数组，在步骤3中，我有一个SelectedCompetency属性，它保存用户选择用于添加技能的能力，以及一个selectedSkills数组来添加到此能力

要发布到api，我需要一个数组，如

[
  competenceId: 1
  skills: 
  [
   {skillId: 1},
   {skillId: 2},
   {skillId: 3},
   {skillId: 4},
  ]
]

我需要这样做，用户添加第一组能力/技能。他想将技能添加到另一种能力中，因此需要有一个按钮，在表单中添加两个新字段，以便他以同样的方式填写。 我花了整整一天的时间试图弄明白这个逻辑，但似乎什么都不起作用

下面是我的步进器组件：

<template>
  <v-stepper v-model="step" alt-labels>
    <v-stepper-header>
      <v-stepper-step editable step="1" :complete="step > 1">Avaliação</v-stepper-step>
      <v-divider></v-divider>

      <v-stepper-step editable step="2" :complete="step > 2">Competências</v-stepper-step>
      <v-divider></v-divider>

      <v-stepper-step editable step="3" :complete="step > 3">Fatores</v-stepper-step>
      <v-divider></v-divider>

      <v-stepper-step step="4">Resumo</v-stepper-step>
    </v-stepper-header>

    <v-stepper-content step="1">
      <v-row align="center" justify="center">
        <v-col cols="4">
          <v-text-field label="Descrição"></v-text-field>
        </v-col>
      </v-row>

      <v-row align="center" justify="center">
        <v-col cols="4">
          <v-text-field v-model="newAppraisal.year" label="Ano"></v-text-field>
        </v-col>
      </v-row>

      <v-row align="center" justify="center">
        <v-col cols="2">
          <v-menu
            v-model="menu_std"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field label="Data de Início" readonly v-on="on" :value="computedStartDate"></v-text-field>
            </template>
            <v-date-picker
              v-model="newAppraisal.startDate"
              show-week
              @input="menu_std = false"
              color="primary"
            ></v-date-picker>
          </v-menu>
        </v-col>

        <v-col cols="2">
          <v-menu
            v-model="menu_end"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field label="Data de Término" readonly v-on="on" :value="computedEndDate"></v-text-field>
            </template>
            <v-date-picker
              v-model="newAppraisal.endDate"
              show-week
              @input="menu_end = false"
              color="primary"
            ></v-date-picker>
          </v-menu>
        </v-col>
      </v-row>

      <v-row align="center" justify="center">
        <v-col cols="2">
          <v-radio-group v-model="newAppraisal.type" row>
            <v-radio label="Obrigatória" value="0" color="primary"></v-radio>
            <v-radio label="Pontual" value="1" color="primary"></v-radio>
          </v-radio-group>
        </v-col>
        <v-col cols="2">
          <div v-if="newAppraisal.type === '1'">
            <v-select label="Selecione o usuário" chips v-model="newAppraisal.appraised"></v-select>
          </div>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-row align="center" justify="end">
            <v-btn color="success" tile large @click.native="next">Continuar</v-btn>
          </v-row>
        </v-col>
      </v-row>
    </v-stepper-content>

    <v-stepper-content step="2">
      <v-row align="center" justify="center">
        <v-col cols="4">
          <v-select
            v-model="selectedCompetences"
            :items="competences"
            multiple
            item-text="name"
            return-object
            label="Selecione as competências"
            chips
            hint="Adicione as competências para essa avaliação"
            persistent-hint
          ></v-select>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-row align="center" justify="space-between">
            <v-btn color="error" tile large @click.native="previous">Voltar</v-btn>
            <v-btn color="success" tile large @click.native="next">Continuar</v-btn>
          </v-row>
        </v-col>
      </v-row>
    </v-stepper-content>

    <v-stepper-content step="3">
      <v-row align="center" justify="center">
        <v-col cols="8">
          <v-subheader class="title">Competencia 1</v-subheader>

          <v-divider></v-divider>
        </v-col>
      </v-row>
      <v-row align="center" justify="center">
        <v-col cols="4">
          <v-autocomplete
            :items="selectedCompetences"
            item-text="name"
            item-value="competenceId"
            v-model="selectedCompetence"
            label="Competência"
          ></v-autocomplete>
        </v-col>
      </v-row>

      <v-row align="center" justify="center">
        <v-col cols="4">
          <v-select
            :items="skills"
            v-model="selectedSkills"
            multiple
            chips
            label="Fatores"
            item-text="name"
            item-value="skillId"
          ></v-select>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-row align="center" justify="space-between">
            <v-btn color="error" tile large @click.native="previous">Voltar</v-btn>
            <v-btn color="success" tile large @click.native="next">Continuar</v-btn>
          </v-row>
          <v-btn color="success" @click.native="addSkillsToCompetence">teste aqui</v-btn>
        </v-col>
      </v-row>
    </v-stepper-content>

    <v-stepper-content step="4">
      <v-list>
        <v-list-item>{{newAppraisal.year}}</v-list-item>
        <v-list-item>{{computedStartDate}}</v-list-item>
        <v-list-item>{{computedEndDate}}</v-list-item>
        <v-list-item v-if="newAppraisal.type === '0'">Obrigatória</v-list-item>
        <v-list-item v-else-if="newAppraisal.type === '1'">Pontual</v-list-item>
        <v-list-item
          v-for="(competence, index) in selectedCompetences"
          :key="index"
        >{{competence.name}}</v-list-item>
      </v-list>
      <v-btn color="primary" @click.native="previous">Voltar</v-btn>
      <v-btn color="primary" @click.native="save">Salvar</v-btn>
    </v-stepper-content>
  </v-stepper>
</template>

<script>
import moment from "moment";
export default {
  data: () => ({
    step: 1,
    menu_std: false,
    menu_end: false,
    newAppraisal: {
      year: "",
      startDate: new Date().toISOString().substr(0, 10),
      endDate: new Date().toISOString().substr(0, 10),
      type: "0",
      appraised: {
        name: "",
        sector: "",
        admissionDate: new Date().toISOString().substr(0, 10),
        jobTitle: "",
        appraiserName: ""
      }
    },
    competences: [],
    selectedCompetences: [],
    selectedCompetence: "",
    competenceSkills: [],
    skills: [],
    selectedSkills: [],
    errors: [],
    teste: {
      competenceId: "",
      skills: []
    }
  }),
  computed: {
    computedStartDate() {
      return this.newAppraisal.startDate
        ? moment(this.newAppraisal.startDate).format("DD/MM/YYYY")
        : "";
    },
    computedEndDate() {
      return this.newAppraisal.endDate
        ? moment(this.newAppraisal.endDate).format("DD/MM/YYYY")
        : "";
    }
  },
  methods: {
    previous() {
      this.step--;
    },
    next() {
      this.step++;
    },
    save() {
      // first save appraisal, then add skill to competence, then add competence to appraisal
    },
    loadCompetences() {
      axios
        .get("/questionnaire/competences")
        .then(response => {
          this.competences = response.data;
        })
        .catch(e => {
          this.errors.push(e);
        });
    },
    loadSkills() {
      axios
        .get("/questionnaire/skills")
        .then(response => {
          this.skills = response.data;
        })
        .catch(e => {
          this.errors.push(e);
        });
    },
    addSkillsToCompetence() {
      console.log(this.selectedCompetence, this.selectedSkills);
      this.teste.competenceId = this.selectedCompetence
      this.teste.skills = this.selectedSkills
      console.log(this.teste);
      this.competenceSkills.push(this.teste)

    }
  },
  created() {
    this.loadCompetences();
    this.loadSkills();
  }
};
</script>

<style>
</style>

---

如果有人能帮上忙，我会陷入困境，我不确定我是否正确理解你，但这是我的解决方案：

第一步 步骤2 {{set.competency} 新Vue{ el:“应用程序”， vuetify：新的vuetify， 数据：=>{ 步骤：1， 能力：[ "福",， “酒吧”， "嘶嘶",， “嗡嗡声” ], 技能：[ "沟通",， “团队合作”， "适应性",， “解决问题”， “创造力” ], 选定能力：[]， selectedSkillSets:[] }, 计算：{ 可用能力{ let used=this.selectedSkillSets.mapset=>set.competency 返回此值。selectedCompetencies.filtercompetence=> ！used.includeCompetence } }, 方法：{ AddSkillSetCompetency{ 此选项为.selectedSkillSets.push{ 能力 技能：[] } } } }

---

我希望这有帮助。

你好。是的，这正是我想要的。非常感谢你的帮助