On a Keydown.enter event in input element within a child component is also calling a method that is defined in Parent Component

Question

I have a parent component where user can select skills from a range of options and a child component where user can add their own skill if its not available on the parent component.

The issue is in child component , when a user enters skill into an input element on which I have an @keydown.ente r event defined to call a method, to take the input and push it to an array and that all works. The only problem is when keydown.enter event is fired it's also calling a method that is defined in the parent component which changes 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: [], // getting skills from an axios call
      selectedSkills: [],

    }
  }
}
methods: {

addSkill(skill) { // this is the method getting 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"> // will be using v-for to loop on userProvidedSkills and show the user inputs
                Rrby on rails
                <button class="userSkillboxBtn btn-sm border-0 text-white"> // to 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>

Answer 1

It is not clear where you're adding the keydown event, but there 2 possible solutions:

1.Use a event modifier on the input to stop propagation

<input @keydown.enter.stop

2.Use the self event modifier on the parent component button

<button 
v-for="skill in skills" 
@click.self="addSkill(skill)" 
:value="skill.category">

  {{skill.skills}}

More about event modifiers here