Javascript Laravel 5.5和vue typeahead-防止onHit方法中的自动提交表单

我在Laravel项目中使用该组件

当我通过“回车”键在结果列表中选择一个条目时，所附表单将自动提交。你知道用onHit方法防止这种情况的好方法吗

这是我的组件：

从“vue typeahead”导入VueTypeahead；
从“Axios”导入Axios；
Vue.prototype.$http=Axios；
var-elem；
导出默认值{
扩展：VueTypeahead，
道具：['targetInput'，'keywordCategory'，'append']，
数据（）{
返回{
src:“/api/autocomplete”，
数据：{
query:this.query，
类别：this.keywordCategory，
append:this.append
},
限额：10，
明查斯：3，
selectFirst：是的，
queryParamName:“搜索”
}
},
方法：{
击中（物品）{
elem=document.getElementById（this.targetInput）；
if（this.append！==未定义和&elem.value！==''）{
elem.value+=this.append+item.name；
}否则{
elem.value=item.name；
}
}
}
}

您的原始代码可能是这样的

<form>
    <input type="text">
</form>

<form  @keypress.enter="$event.preventDefault()">
    <input type="text">
</form>

---

示例：请参阅中的./components/Hello.vue。

感谢Jacob的快速回答。还有一个问题：是否可以将此触发函数动态附加到表单元素？我真的不知道您的意思。使用您的解决方案，每次在我的应用程序中使用vue typeahead组件时，我都必须修改Laravel表单视图文件。我的想法/问题是：是否可以将preventDefault绑定到vue typeahead组件本身中的表单？@hasentopf我已经更新了答案。在Laravel中对您有效吗？抱歉，现在完整的回车键不起作用。此外，还阻止了所需的vue提前键入行为。你的第一个方法更好。

<script>
    export default {
    ...
    mounted() {
        document.querySelector('#test-form').addEventListener('keypress', function (e) {
            var key = e.which || e.keyCode;
            if (key === 13) { // 13 is enter
                // code for enter
                e.preventDefault();
            }
        });
    }
}

</script>