0

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.enter 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>
ZayR
  • 49
  • 1
  • 1
  • 3
  • It's unlikely that the child's event is firing a parent handler. It's more likely a different cause, but the question does not include enough context to determine that. Can you provide a demo (e.g. in Codesandbox)? Or update the question to show more of the parent template -- enough to reproduce the problem. – tony19 Mar 24 '19 at 03:52

1 Answers1

0

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

tony19
  • 125,647
  • 18
  • 229
  • 307
Radu Diță
  • 13,476
  • 2
  • 30
  • 34