vuejs阻止从子组件提交表单

Question

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

<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（）。这些都不起作用。深入了解事件处理程序，我发现在触发处理程序之前，在表单上进行提交。我以为事件可能起源于or

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

我如何告诉父母“不提交”并实际上让其听？

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

Answer 1

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