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: []
})
}
}
})
I hope this help.
๐คUser 28
Source:stackexchange.com