无论如何，点击带有 keyup.enter.prevent 表单的输入

Question

在@vue/cli 4.1.1 应用程序中，我使用 bootstrap-vue 并且我有一个包含 2 个选项卡的表单：在第一个选项卡上的几个字段上，然后在任何一个上单击 Enter 键控制我的表单按预期提交，但我有第二个选项卡包含元关键字列表和我要单击的单个输入控件在这个控件上

v-on:keyup.enter.prevent="addMetaKeyword()"

到运行更新方法，但没有提交表单，但由于我的表单已提交而失败。我喜欢 :

<template>
    <b-card class="backend_editor_container">
        <b-card-header>
            <h3 class="row_content_left_aligned p-2" v-show="is_page_loaded">
                <i :class="'info_link '+getHeaderIcon('page')"></i>{{ getHeaderTitle }}
            </h3>
            <div v-show="!is_page_loaded">
                <h3>
                    <b-spinner variant="success" label="Page loading"></b-spinner>&nbsp;Page loading...
                </h3>
            </div>

        </b-card-header>

        <b-card-body v-show="is_page_loaded">

            <div>
                <b-tabs content-class="mt-3" justified>

                    <b-tab
                            title="Details"
                    >

                        <ValidationObserver
                                ref="pageObserverForm"
                                v-slot="{handleSubmit}"
                        >
                            <b-form @submit.prevent="handleSubmit(onSubmit)">


                                <b-row class="editor_row" v-if="!is_insert">
                                    <b-col md="4">
                                        <label for="id" class="pt-2 ">Id:</label>
                                    </b-col>
                                    <b-col md="8">
                                        <b-form-input
                                                id="id"
                                                v-model="pageForm.id"
                                                readonly
                                                class="text-right"
                                        ></b-form-input>
                                    </b-col>
                                </b-row>
        ...
                    </b-tab>


                    <b-tab
                            title="Meta"
                            active
                    >
                        <fieldset class="bordered text-muted p-0 m-0 mb-4">

                            <legend class="bordered">Add meta keyword</legend>

                            <b-row class="editor_row">
                                <b-col md="4">
                                    <label for="new_meta_keyword" class="pt-2 ">New meta keyword:</label>
                                </b-col>
                                <b-col md="8">
                                    <b-form-input
                                            id="id"
                                            v-model="new_meta_keyword"
                                            class="text-left"
                                            v-on:keyup.enter.prevent="addMetaKeyword()"
                                    ></b-form-input>
                                </b-col>
                            </b-row>
                            <div class="buttons_container">
                                <b-button type="button" variant="primary" size="sm" @click.prevent="addMetaKeyword()" class="m-1 ml-4">
                                    <i :class="'info_link '+getHeaderIcon('save')"></i>Add
                                </b-button>
                            </div>

                        </fieldset>

有多正确？

"bootstrap-vue": "^2.3.0",
"vue": "^2.6.11",

修改块#1：

    addMetaKeyword() {
        this.new_meta_keyword = this.trim(this.new_meta_keyword)
        if (this.isEmpty(this.new_meta_keyword)) {
            this.showPopupMessage('Page editor', 'Meta keyword can not be empty !', 'warn')
            return
        }

        let l = this.metaKeywordsList.length
        for (let i = 0; i < l; i++) {
            if (this.metaKeywordsList[i] === this.new_meta_keyword) {
                this.showPopupMessage('Page editor', 'This Meta keyword is already defined !', 'warn')
                return
            }
        }

        this.metaKeywordsList[this.metaKeywordsList.length] = this.new_meta_keyword
        this.new_meta_keyword = null
        this.showPopupMessage("Page editor", 'You need to save changes in meta keyword mby clicking on "Update" button !', 'success');
    },

谢谢！

Answer 1

问题是 keyup 事件是不可预防的。而是像 <b-input @keydown.enter.prevent="yourMethod"></b-input> 这样使用 keydown 事件，这将运行 yourMethod 而无需提交表单。

new Vue({
 el: "#app",
 methods: {
  onSubmit() {
    console.log('Form submitted')
  },
  doOtherStuff(){
    console.log('Doing other stuff')
  }
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.2/dist/bootstrap-vue.css" rel="stylesheet"/>

<div id='app'>
  <b-form @submit.prevent="onSubmit">
    <h1>This will submit your form</h1>
    <b-input></b-input>
    <h1>This wont submit your form</h1>
    <b-input @keydown.enter.prevent="doOtherStuff"></b-input>
    
    <!-- Needs the button to handle submit, I'm hiding it in this case -->
    <b-btn type="submit" class="d-none"></b-btn>
  </b-form>
</div>

无论如何，点击带有 keyup.enter.prevent 表单的输入

Clicking on input with keyup.enter.prevent form is submitted anyway

vuejs2

vue-events