[Vuejs]-Change html,js,css files into Single file component

by

0👍

✅

There’s multiple problems, it looks like you’ve already sorted your props problem.

When checking if an email already exists, it would atleast be clearer if the iteration variable was called something else other than userdetails i.e. userdetail

 userdetails.some(function(userdetail) {
    return userdetail.email === newEmail;
 })

You’re also initializing userdetails as a string but then do a push later on, which doesn’t exist on a string.

var userdetails = [];

EDIT: I updated my answer with a fiddle, it doesn’t work in the fiddle environment for security reasons with localStorage but I copied it into a .html file and it seemed to work.

new Vue ({
  el: '#register',
  data: function() {
    return {
      name: '',
      email: '',
      password: ''
    }
  },
  methods: {
    onsubmit: function() {
      let userDetails = [];
      let localUserDetails = localStorage.getItem("userDetails");
      
      if(localUserDetails)
      userDetails = JSON.parse(localUserDetails);
      
        if (userDetails && userDetails.some(x => x.email === this.email)) 
        {
          alert("Email exists!");
          return;
        }

        let newUserDetails = {
          email: this.email,
          password: this.password
        };
        
        userDetails.push(newUserDetails); 
        localStorage.setItem("userDetails", JSON.stringify(userDetails));
      }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="register">
  <form id="details" method="POST" @submit.prevent="onsubmit">
    <div>
      Name: <input v-model="name" type="name" />
    </div>
    <div>
      Email: <input v-model="email" type="email" />
    </div>
    <div>
      Password: <input v-model="password" type="password" />
    </div>
    <button type="submit">Register</button>
  </form>
</div>

0👍

This article should explain it for you. Do these fields need to be properties (e.g. getting pass from the parent component)? If not, you should just make them as data:

 data: function() {
        return {
            name: '',
            email: '',
            password: '',
        }
    },

Leave a comment