Блог

У меня есть родительский компонент, где пользователь может выбирать навыки из ряда опций, и дочерний компонент, где пользователь может добавить свой собственный навык, если он недоступен в родительском компоненте.

Проблема заключается в дочернем компоненте, когда пользователь вводит навык в элемент ввода, для которого у меня есть событие @keydown.enter, определенное для вызова метода, для получения входных данных и отправки их в массив, и все это работает. Единственная проблема заключается в том, что при запуске события keydown.enter также вызывается метод, определенный в родительском компоненте, который изменяет состояние элемента options.

 // 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>
  

Неясно, куда вы добавляете событие keydown, но есть 2 возможных решения:

1. Используйте модификатор события на входе, чтобы остановить распространение

 <input @keydown.enter.stop
  

2. Используйте модификатор события self на кнопке родительского компонента

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

  {{skill.skills}}
  

Подробнее о модификаторах событий здесь