0

我有一个父组件，用户可以在其中从一系列选项中选择技能，还有一个子组件，如果父组件上不可用，用户可以在其中添加自己的技能。

问题出在子组件中，当用户将技能输入到输入元素中时，我在该输入元素上定义了一个@keydown.enter事件来调用方法，以获取输入并将其推送到数组中，一切正常。唯一的问题是当 keydown.enter 事件被触发时，它还调用了在父组件中定义的方法，该方法改变了选项元素的状态。

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

1 回答 1

0

目前尚不清楚您在哪里添加 keydown 事件，但有两种可能的解决方案：

1.在输入上使用事件修饰符来停止传播

<input @keydown.enter.stop

2.在父组件按钮上使用self事件修饰符

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

  {{skill.skills}}

更多关于事件修饰符的信息在这里

于 2019-03-23T12:41:04.460 回答