Vue.js bootstrap-vue: How to add correctly a cancel button in my form

Question

I am trying to add a cancel button, the same way as the reset button is defined, but it does not fire the method and the validation is still performed ( required felds )

I added @cancel="onCancel" property in my and onCancel(evt) method which is not executed as no console output...

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>

skribe · Accepted Answer · 2017-12-21 18:08:32Z

5

There is no native html form button type attribute of "cancel" that is why this is not working. https://www.w3schools.com/tags/att_button_type.asp

You will have to go about it a different way.

On your cancel button add the click handler.

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

Then add onCancel directly to your methods

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

Notice there is no need to pass the event as you can use the .prevent handler. Also this is really redundant on a <button type="button"> element, because using the type=button also prevents the default submit handler when a button is in a form.

edited Dec 21, 2017 at 18:08

answered Dec 21, 2017 at 18:03

skribe

3,6254 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user762579 Over a year ago

Thanks a lot ... there was alittle warning in my mind about it... thanks for your feedback.. I also disabled the native valdiation and added the bootstrap-vue validation... working fine...

Collectives™ on Stack Overflow

Vue.js bootstrap-vue: How to add correctly a cancel button in my form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related