[Vuejs]-How to dynamically add/remove a new form row with select/autocomplete values in vuetify?

1๐Ÿ‘

โœ…

Iโ€™m not sure I understand you correctly but this is my solution:

<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

I hope this help.

๐Ÿ‘คUser 28

Leave a comment