onsubmit是Vue中一個非常重要的概念,它是Vue表單提交的事件,常用于表單校驗和數據請求。Vue提供了v-on指令來監聽表單提交事件,同時可以使用prevent修飾符來避免表單默認的提交行為。
<form v-on:submit.prevent="onSubmit">
<input type="text" v-model="username"/>
<input type="password" v-model="password"/>
<button type="submit">Login</button>
</form>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
onSubmit: function() {
// 表單提交邏輯
}
}
})
</script>
除了使用prevent修飾符外,還可以使用stop修飾符來停止事件冒泡,或者使用capture修飾符來監聽表單提交事件的冒泡階段。
<form v-on:submit.prevent.stop.capture="onSubmit">
<!-- 表單元素 -->
</form>
在實際應用中,經常需要使用Vue提供的$refs來獲取表單元素,以及使用axios等工具庫發送數據請求。
<form v-on:submit.prevent="onSubmit">
<input type="text" ref="usernameInput"/>
<input type="password" ref="passwordInput"/>
<button type="submit">Login</button>
</form>
<script>
new Vue({
el: '#app',
methods: {
onSubmit: function() {
const username = this.$refs.usernameInput.value
const password = this.$refs.passwordInput.value
axios.post('/api/login', { username, password })
.then(response =>{
// 處理響應數據
})
.catch(error =>{
// 處理錯誤信息
})
}
}
})
</script>