Skip to content

Instantly share code, notes, and snippets.

@hirokazumiyaji
Created August 17, 2017 06:52
Show Gist options
  • Save hirokazumiyaji/c99b3a2c8318fa1827f1605065b5a3a0 to your computer and use it in GitHub Desktop.
Save hirokazumiyaji/c99b3a2c8318fa1827f1605065b5a3a0 to your computer and use it in GitHub Desktop.
vuejs form confirm
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<form>
<div v-if="isConfirm === true">
<p>{{ email }}</p>
<p>{{ password }}</p>
<p>{{ passwordConfirm }}</p>
<input type="hidden" name="email" value="{{ email }}">
<input type="hidden" name="password" value="{{ password }}">
<input type="hidden" name="password_confirm" value="{{ passwordConfirm }}">
<button v-on:click="submit">登録する</button>
</div>
<div v-if="isConfirm === false">
<input type="text" v-model="email">
<input type="password" v-model="password">
<input type="password" v-model="passwordConfirm">
<button v-on:click="confirm">確認画面へ</button>
</div>
</form>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
email: "",
password: "",
passwordConfirm: "",
isConfirm: false
},
methods: {
confirm: function(e) {
e.preventDefault();
this.isConfirm = true;
},
submit: function(e) {
e.preventDefault();
console.log(this.email);
console.log(this.password);
console.log(this.passwordConfirm);
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment