0

I am trying to convert the html,js,css files into a single file component using Vue. I have defined the form 'logininfo', but an error message appears in the command line saying 'logininfo' is undefined. So I can't check if the login form is working properly. I have defined the 'logininfo' in the form id and when I export it in the script file. 

<template>
<div id="login">
<form id="logininfo" method="POST"  @submit.prevent="onsubmit">

        Email: <input v-model="email" type="email">
        Password: <input v-model="password" type="password">
        <button v-on:click="login" id="login">Login </button> 
</form>
</div>

</template>
<script>

export default {
name: ‘logininfo’,
data() {

  email: "",
  password: ""
 },

  methods: {
    login: function () {
        var account = JSON.parse(localStorage.getItem('userdetails')).find(function(userdetails) {
            return (logininfo.email === userdetails.email && logininfo.password === userdetails.password) ? userdetails : null;
        });

        if(account) {
            window.location.href = "index.html?email=" + account.email;
        } else {
            alert("Email has not been identified. ");
        }
     }
}}

Janani Ashok
  • 9
  • 4

1 Answers1

0

Since you are referencing the component data inside a nested function, you need to keep a scoped reference to the object.

function () {
var self = this;
var account = JSON.parse(localStorage.getItem('userdetails')).find(function(userdetails) {
    return (self.email === userdetails.email && self.password === userdetails.password) ? userdetails : null;
});
Soturi
  • 1,486
  • 1
  • 14
  • 30
  • Thank you for the help. It says cannot read property 'email' of undefined. But I have defined it. – Janani Ashok Mar 02 '20 at 19:43
  • Ah, missed the nested function. You need to keep a reference to the object to access the properties. I updated the answer. – Soturi Mar 02 '20 at 19:48
  • Refresh - my update got overwritten and I had to re-update. `var self = this;` and then in the function, `self.email` – Soturi Mar 02 '20 at 19:52
  • Do I need to define a value as it says cannot read property 'find' of null. Thank you so much for all the help. – Janani Ashok Mar 02 '20 at 20:01
  • That's a separate issue, you probably intend to use `window.localStorage` which is why the return value of `getItem` is null and `find` is undefined. – Soturi Mar 02 '20 at 20:09
  • Oh ok, thank you. Because this code was working when they were in separate html,js files. but when I changed it to a single file component the code is slightly not working. – Janani Ashok Mar 02 '20 at 20:11