Vue.js bootstrap-vue: Wie füge ich eine Abbrechen-Schaltfläche in meinem Formular korrekt ein

Question

Ich versuche eine Abbrechen-Schaltfläche hinzuzufügen, genauso wie die Schaltfläche zum Zurücksetzen definiert ist, aber die Methode wird nicht ausgelöst, und die Validierung wird ausgeführt nach wie vor durchgeführt (erforderlich felds)

hinzugefügt I @ cancel = "onCancel" Eigenschaft in meinem und onCancel (evt) Methode , die nicht als ohne Konsolenausgabe ausgeführt wird ...

NewUser.vue

<template> 
     <div id="createUserForm"> 
     <h2>New User Form</h2> 
     <b-form @submit="onSubmit" @reset="onReset" @cancel="onCancel" v-if="show"> 
      <b-form-group id="userInputGroup1" 
         label="Email address:" 
         label-for="emailInput" 
         description="We'll never share your email with anyone else."> 
      <b-form-input id="emailInput" 
          type="email" 
          v-model="form.email" 
          required 
          placeholder="Enter email"> 
      </b-form-input> 
      </b-form-group> 
      <b-form-group id="userInputGroup2" 
         label="Your First Name:" 
         label-for="firstNameInput"> 
      <b-form-input id="firstNameInput" 
          type="text" 
          v-model="form.firstName" 
          required 
          placeholder="Enter first name"> 
      </b-form-input> 
      </b-form-group> 
      <b-form-group id="userInputGroup3" 
         label="Your Last Name:" 
         label-for="lastNameInput"> 
      <b-form-input id="lastNameInput" 
          type="text" 
          v-model="form.lastName" 
          required 
          placeholder="Enter last name"> 
      </b-form-input> 
      </b-form-group> 
      <b-form-group id="userInputGroup4" 
         label="Gender:" 
         label-for="genderInput"> 
      <b-form-radio-group id="genders" v-model="gender" :options="genderOptions" name="userGender"></b-form-radio-group> 
      </b-form-group> 
      <b-button type="cancel" variant="secondary">Cancel</b-button> 
      <b-button type="submit" variant="primary">Submit</b-button> 
      <b-button type="reset" variant="danger">Reset</b-button> 
     </b-form> 
     </div> 
    </template> 

    <script> 
     import store from '@/vuex/store' 
     import { mapActions } from 'vuex' 
     import _ from 'underscore' 

     export default { 
     data() { 
      return { 
      form: { 
       email: '', 
       firstName: '', 
       lastName: '', 
       gender: null 
      }, 
      gender: 'male', 
      genderOptions: [ 
       { text: 'Male', value: 'male' }, 
       { text: 'Female', value: 'female' } 
      ], 
      show: true 
      } 
     }, 
     methods: _.extend({}, mapActions(['createUser']), { 
      onSubmit (evt) { 
      evt.preventDefault() 
      alert(JSON.stringify(this.form)) 
      // this.createUser(this.user) 
      }, 
      onReset (evt) { 
      evt.preventDefault() 
      /* Reset form values */ 
      this.form.email = '' 
      this.form.firstName = '' 
      this.form.lastName = '' 
      this.form.gender = null 
      this.form.checked = [] 
      /* Trick to reset/clear native browser form validation state */ 
      this.show = false 
      this.$nextTick(() => { this.show = true }) 
      }, 
      onCancel (evt) { 
      evt.preventDefault() 
      console.log('CANCEL SUBMIT') 
      this.show = false 
      this.$router.push({ name: 'users' }) 
      } 
     }), 
     store 
     } 
    </script> 

Answer 1

Es gibt Keine native HTML-Formular-Schaltfläche Typ Attribut "Abbrechen", das ist, warum dies nicht funktioniert. https://www.w3schools.com/tags/att_button_type.asp

Sie müssen einen anderen Weg gehen.

Fügen Sie auf der Schaltfläche Abbrechen den Click-Handler hinzu.

<b-button type=button @click.prevent="onCancel" >Cancel<b-button> 

Dann fügen Sie onCancel direkt auf Ihre Methoden

methods: { 
    onCancel(){ 
     console.log('CANCEL SUBMIT'); 
     this.show = false; 
     this.$router.push({ name: 'users' }); 
    } 
} 

Hinweis gibt es keine Notwendigkeit, das Ereignis übergeben, wie Sie den .prevent Handler verwenden können. Auch das ist wirklich redundant auf einem <button type="button"> Element, weil die Verwendung der type=button verhindert auch die Standardübergabe-Handler, wenn eine Schaltfläche in einem Formular ist.