javascript - 如何在 vuetify 中动态添加/删除带有选择/自动完成值的新表单行？

Question

我已经在使用 Vuejs 和 Vuetify 的动态表单上苦苦挣扎了一段时间。首先，我有一个 API，它可以返回我的能力和技能的值，以添加到评估中。创建新评估时，我想逐步显示表单，因此我使用 v-stepper。问题是，在第三步中，用户需要选择之前已经选择过的一项能力，选择该能力后，需要在该能力上添加技能，所以一种能力可以有多种技能。

我想做的是，在步骤 2 中，我有一个填充 selectedCompetences 数组的选择，在步骤 3 中，我有一个 selectedCompetence 属性，它保存用户选择用于添加技能的能力，以及一个 selectedSkills数组，添加到这个权限中。

要发布到 api，我需要一个像这样的数组

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

而且，我需要这样做，用户添加第一组能力/技能。他想要将技能添加到另一项能力中，因此需要有一个按钮来向表单添加 2 个新字段，以便他以相同的方式填写。我花了一整天的时间试图弄清楚这个逻辑，但似乎没有任何作用。

下面是我的步进器组件:

<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>

如果有人能帮忙解决这个问题，我就陷入困境了

Answer 1

我不确定我是否正确理解了您的意思，但这是我的解决方案:

<div id='app'>
  <v-app>
    <v-container>
      <v-stepper
        vertical
        v-model='step'>
        <v-stepper-step
          editable
          key='step-1'
          :step='1'
          :complete='step > 1'>
          Step 1
        </v-stepper-step>
        <v-stepper-content
          key='content-1'
          :step='1'>
          <v-select
            multiple
            label='Select Competencies'
            v-model='selectedCompetencies'
            :items='competencies'/>
        </v-stepper-content>
        <v-stepper-step
          editable
          key='step-2'
          :step='2'
          :complete='step > 2'>
          Step 2
        </v-stepper-step>
        <v-stepper-content
          key='content-2'
          :step='2'>
          <div v-for='set in selectedSkillSets'>
            <div>{{ set.competence }}</div>
            <v-select
              multiple
              label='Add Skill'
              v-model='set.skills'
              :items='skills'/>
          </div>
          <v-select
            label='Add Skill Set'
            v-if='availableCompetencies.length'
            :items='availableCompetencies'
            @change='addSkillSet($event)'/>
        </v-stepper-content>
      </v-stepper>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',

  vuetify: new Vuetify(),

  data: () => ({
    step: 1,
    competencies: [
      'Foo',
      'Bar',
      'Fizz',
      'Buzz'
    ],
    skills: [
      'Communication',
      'Teamwork',
      'Adaptability',
      'Problem-Solving',
      'Creativity'
    ],
    selectedCompetencies: [],
    selectedSkillSets: []
  }),

  computed: {
    availableCompetencies() {
      let used = this.selectedSkillSets.map(set => set.competence)
      return this.selectedCompetencies.filter(competence => (
        !used.includes(competence)
      ))
    }
  },

  methods: {
    addSkillSet(competence) {
      this.selectedSkillSets.push({
        competence,
        skills: []
      })
    }
  }
})

Example

我希望这会有所帮助。