In my application, there is a parent component that allows users to select skills from a list of options. Additionally, there is a child component where users have the ability to add their own skill if it is not available in the parent component.
The challenge lies within the child component. When a user types a skill into the input field, an @keydown.enter event is triggered to add the input to an array. This functionality works correctly, but the issue arises when the keydown.enter event also invokes a method in the parent component that alters the state of the options element.
// parent component
<div class="card-body">
<p class="card-subtitle font-weight-bold mb-1">Select Skills</p>
<button
v-for="skill in skills"
:key="skill.id"
:class="[skill.state ? skillSelectedState : skillNotSelectedState]"
class="btn btn-sm m-2" @click="addSkill(skill)"
:value="skill.category">
{{skill.skills}}
</button>
<clientInput></clientInput> // child component
</div>
<script>
import clientInput from './ClientSkillInput.vue'
export default {
data() {
return {
skills: [], // fetching skills from an axios call
selectedSkills: [],
}
}
}
methods: {
addSkill(skill) { // method being called
if (!skill.state) {
this.selectedSkills.push(skill.skills);
skill.state = true;
} else {
let position = this.selectedSkills.indexOf(skill.skills);
this.selectedSkills.splice(position, 1);
// skill.state = false;
}
},
}
// child component
<template>
<div class="form-group mt-2">
<label class="d-block">Not what you're looking for?</label>
<div class="customWraper">
<div class="userSkillbox d-inline bg-secondary"> // using v-for to loop through userProvidedSkills and display user inputs
Ruby on Rails
<button class="userSkillboxBtn btn-sm border-0 text-white"> // remove the input item
<i class="fas fa-times"></i>
</button>
</div>
<input v-model="userInput" type="text" class="d-inline border-0" placeholder="Type to add different skill" @Click="">
</div>
</div>
</template>
<script>
export default {
data() {
return {
isEditable: true,
userInput: '',
userProvidedSkills: [],
}
},
methods: {
addUserInput() {
this.userProvidedSkills.push(this.userSkill);
this.userSkill = '';
}
}
}
</script>