Vue.js引导-vue:如何在窗体中正确添加取消按钮

Question

我试图添加一个“取消”按钮，就像定义“重置”按钮一样，但是它不会触发该方法，并且仍然在执行验证(必需的felds )。

我在我的和@cancel=(Evt)方法中添加了onCancel“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

没有本机html表单按钮类型属性"cancel“，这就是为什么它不能工作的原因。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还可以防止在表单中使用按钮时的默认提交处理程序。