Vue.js bootstrap-vue：如何在我的表单中正确添加取消按钮

Question

我正在尝试添加一个取消按钮，与定义重置按钮的方式相同，但它不会触发该方法并且仍然会执行验证（必填字段）

我在我的 onCancel(evt) 方法中添加了 @cancel="onCancel" 属性没有执行，因为没有控制台输出...

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

"cancel" 没有原生的 html 表单按钮类型属性，这就是它不起作用的原因。 https://www.w3schools.com/tags/att_button_type.asp

你将不得不以不同的方式去做。

在取消按钮上添加点击处理程序。

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

然后将 onCancel 直接添加到您的方法中

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

请注意，无需传递事件，因为您可以使用 .prevent 处理程序。此外，这在 <button type="button"> 元素上确实是多余的，因为当按钮位于表单中时，使用 type=button 还会阻止默认提交处理程序。

Vue.js bootstrap-vue：如何在我的表单中正确添加取消按钮

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

vue.js

bootstrap-4

bootstrap-vue