Нажатие на ввод с помощью формы keyup.enter.prevent отправляется в любом случае - PullRequest
Новая
       34

Нажатие на ввод с помощью формы keyup.enter.prevent отправляется в любом случае

1 голос
/ 18 февраля 2020

В приложении @ vue / cli 4.1.1 я использую bootstrap - vue и у меня есть форма с 2 вкладками: на 1-й вкладке несколько полей и нажатие клавиши 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');
    },

Спасибо!

1 Ответ

2 голосов
/ 18 февраля 2020

Проблема в том, что событие 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>
...