Answer the question
In order to leave comments, you need to log in
Simple switching of the form AUTHORIZATION REGISTRATION. Simple???
I started to get acquainted with vue with a simple authorization form, divided into two components: login and registration, switching links under each form. I note that the link is inside the component (when the links were outside, I liked everything).
As a result, I seem to have done it and even everything works, but I didn’t get high from the quest with Vue. Or did I do something wrong regarding the usage concept?:
<div id="app">
<component :is="currentForm" v-on:form="switchForm"></component>
</div>
<template id="login-template">
<div>
<h1>Login form</h1>
<form>
<label>Email</label>
<input v-model="email">
<label>Password</label>
<input v-model="password">
</form>
<a href="#" @click="callSwitchForm('registration')">Registration</a>
</div>
</template>
<template id="registration-template">
<div>
<h1>Registration form</h1>
<form>
<label>Email</label>
<input v-model="email">
<label>Password</label>
<input v-model="password">
<label>Re-enter password</label>
<input v-model="repassword">
</form>
<a href="#" @click="callSwitchForm('login')">Login</a>
</div>
</template>
Vue.component('login', {
template: '#login-template',
data: function () {
return {
email: '',
password: '',
}
},
methods: {
callSwitchForm: function(form) {
this.$emit('form', form)
}
}
})
Vue.component('registration', {
template: '#registration-template',
data: function () {
return {
email: '',
password: '',
repassword: '',
}
},
methods: {
callSwitchForm: function(form) {
this.$emit('form', form)
}
}
})
var app = new Vue({
el: '#app',
data: {
currentForm: 'login'
},
methods: {
switchForm: function(form) {
this.currentForm = form
}
}
})
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question