gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:43:40 26 4
gpt4 key购买 nike

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

我在 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>

最佳答案

没有“取消”的原生 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 : How to add correctly a cancel button in my form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47930232/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com