Для события Keydown.enter во входном элементе в дочернем компоненте также вызывается метод, определенный в родительском компоненте. - PullRequest
Новая
       45

Для события Keydown.enter во входном элементе в дочернем компоненте также вызывается метод, определенный в родительском компоненте.

0 голосов
/ 23 марта 2019

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

Проблема связана с дочерним компонентом , когда пользователь вводит навык в элемент ввода, для которого у меня есть событие @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>

1 Ответ

0 голосов
/ 23 марта 2019

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

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

<input @keydown.enter.stop

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

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

  {{skill.skills}}

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

...