1

在@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');
    },

谢谢！

4

1 回答 1

2

问题是keyup事件是不可预防的。而是keydown像这样使用事件<b-input @keydown.enter.prevent="yourMethod"></b-input>，这将在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>

于 2020-02-18T14:10:17.383 回答