Vue.js 2 Web Development Projects

Login component

We can now continue building the Login component, which will take care of signing in and signing up the user.

There are several data properties we need for the state of this component:

• mode: This can either be 'login' or 'signup'. We will change the layout a bit depending on this.
• username: Used in both modes.
• password: Also used in both modes.
• password2: Used to verify the password when signing up.
• email: Used in sign up mode.

1. Our data hook should now look like this:

      data () {        return {          mode: 'login',          username: '',          password: '',          password2: '',          email: '',        }      },

2. We can then add a title computed property to change the form title depending on the mode:

      computed: {        title () {          switch (this.mode) { case 'login': return 'Login' ...