N
N
Nikita Kotenko2018-04-08 20:42:10
Vue.js
Nikita Kotenko, 2018-04-08 20:42:10

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?:

reveal the code
<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
      }
    }
})


Well, if I did everything right, then what's the beauty of vue, if jquery does it in one line?
Thank you.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question