2

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

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

新用户.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>
4

1 回答 1

5

没有“取消”的本机 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当按钮位于表单中时，使用 还会阻止默认提交处理程序。

于 2017-12-21T18:03:14.843 回答