<div id="app">
<div class="form_wrapper">
<form v-on:submit="sendDeleteNumber">
<input class="form-text" type="text" v-model="textNonPrevent">
<br>
<input class="form-button" type="submit" value="submitで送信">
</form>
</div>
<div class="form_wrapper">
<form v-on:submit.prevent="sendKeepNumber">
<input class="form-text" type="text" v-model="textPrevent">
<br>
<input class="form-button" type="submit" value="submit.preventで送信">
</form>
</div>
</div>
#app {
text-align: center;
}
.form_wrapper {
background-color: #aaa;
width: 150px;
margin: 10px auto;
padding: 5px;
}
.form-text {
border: 1px solid #444;
border-radius: 3px;
height: 1.3rem;
width: 100%;
}
.form-button {
border: #aaa;
background-color: #F9AA40;
color: #fff;
}
const app = new Vue({
el: "#app",
data: {
textPrevent: '',
textNonPrevent: ''
},
methods: {
sendKeepNumber() {
alert(`「${this.textPrevent}」をどこかに送信!formはそのまま残るよ!`)
},
sendDeleteNumber() {
alert(`「${this.textNonPrevent}」をどこかに送信!ついでに画面更新しちゃうよ`)
}
}
})
This Pen doesn't use any external CSS resources.