Question

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

我添加了@cancel =＆＃34; onCancel＆＃34; my和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>

然后将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：如何正确添加表单中的取消按钮

1 个答案: