Vue.js bootstrap-vue：フォームにキャンセルボタンを正しく追加する方法

Question

キャンセルボタンを追加しようとしていますが、リセットボタンが定義されているのと同じ方法ですが、メソッドは起動しません。まだ行って（必要felds）

は、私が追加@に= "onCancel" プロパティをキャンセルし、私とonCancel（EVT）メソッドがないコンソール出力として実行されていない ...

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

ありネイティブのhtmlフォームボタンの属性である「キャンセル」は動作しません。 https://www.w3schools.com/tags/att_button_type.asp

あなたはそれを別の方法で行う必要があります。

キャンセルボタンでクリックハンドラを追加します。

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

は、その後、あなたの方法に直接

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

お知らせをonCancelを追加するには.preventハンドラを使用することができるよう、イベントを渡す必要はありません。 type=buttonを使用すると、ボタンがフォームにあるときにデフォルトのサブミットハンドラもできなくなるため、これは<button type="button">要素では実質的に冗長です。