时间戳

首页 > 解决方案 > vuejs 阻止从子组件提交表单

forms - vuejs 阻止从子组件提交表单

问题描述

我正在构建一个自动完成组件，该组件使用从父级动态加载 

<div>
        <input type="text" 
        :placeholder="myResources.Placeholder" @input="onChange" @keyup.down="onArrowDown" @keyup.up="onArrowUp" @keyup.enter.prevent="onEnter($event)" @blur="onBlur"v-model="search" />
        <ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
            <li class="loading" v-if="isLoading">
                Loading results...
            </li>
            <li v-else v-for="(result, i) in results" :key="i"
            @click="setResult(result)" @mouseover="onMouseOver(i)" 
            class="autocomplete-result" :class="{ 'is-active': i === arrowCounter }">
                {{ result }}
            </li>
        </ul>
    </div>

基本上，当用户开始输入搜索结果列表时，会显示一个搜索结果列表，他们可以使用向上和向下箭头键在结果之间进行选择，然后按 Enter 确认他们的选择（或者他们可以使用鼠标）。问题是，组件被放置在父级的标签内。然后按 Enter 提交表单。我尝试使用

@keyup.enter.prevent="onEnter($event)"

或在事件处理程序中调用 event.preventDefault()。这些都不起作用。打破事件处理程序，我发现表单上的提交发生在触发处理程序之前。我想也许事件起源于或

  • 元素，但是当我在它们上粘贴事件处理程序时，它们不会被调用。

    我如何告诉父母“不要提交”并真正让它听？

    正如我所提到的，组件是在父级内部动态呈现的。问题

    • 标签： formsvue.jssubmit

    解决方案

    在你的onArrowUp和onArrowDown函数中，你应该focus()是子组件。这样，肯定会在子项上调用 Enter 键。

    从那里，将您@keyup.enter.prevent的更改@keyup.enter.stop为停止事件传播回父级。

    推荐阅读