materio-d8/web/themes/custom/materiotheme/vuejs/components/User/Login.vue

<template lang="html">
  <div id="block-userlogin" class="">
    <h2>Login Hello!</h2>
    <section>
      <input
        id="edit-name"
        class="form-email"
        type="text"
        placeholder="Email" name="name"
        v-model="mail"
        @keyup.enter="login"
      />
      <input
        id="edit-pass"
        class="form-text"
        type="password"
        placeholder="Password" name="pass"
        v-model="password"
        @keyup.enter="login"
      />
      <button
        id="edit-submit"
        class="button"
        @click.stop="login"
      >
        login
      </button>
    </section>
  </div>
</template>

<script>
// https://github.com/alvar0hurtad0/drupal-vuejs-todo

import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      mail: '',
      password: ''
    }
  },
  computed: {
    ...mapState(['User'])
  },
  methods: {
    ...mapActions({
      userLogin: 'User/userLogin'
    }),

    // usernameInputHandler(input) {
    //     this.username = input;
    // },
    // passwordInputHandler(input) {
    //     this.password = input;
    // },

    login () {
      this.userLogin({
        mail: this.mail,
        pass: this.password
      })
    }
  }

}
</script>

<style lang="scss" scoped>

</style>