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

공지 사항 당신이 .prevent 핸들러를 사용할 수있는 이벤트를 통과 할 필요가 없습니다 당신의 방법에 직접 onCancel를 추가합니다. type=button을 사용하면 버튼이 양식에있을 때 기본 제출 핸들러도 금지되므로이 작업은 <button type="button"> 요소에서 실제로 중복됩니다.