watchers for form input validation in Vue.js don't work-CodePudding

My page is displaying user data, which he can edit. I'm working with views, on a small project. I want to do form validation with regex, but nothing happens. Exemple, When I write an email that does not respect the syntax of a regex no message is displayed. When the regex is valid the validation message also does not appear.

export default {
  name: "profile",
  data() {
    return {
      user: {},
      firstname: "",
      lastname: "",
      email: "",
      msg: [],
    };
  },
  watch: {
    email() {
      this.validateEmail(this.email);
    },
  },

  methods: {
    getProfilUser() {
      UsersDataService.getUser()
        .then((response) => {
          let token = localStorage.getItem("token");
          let decoded = VueJwtDecode.decode(token);
          this.user = decoded;
          console.log(response);
        })
        .catch((error) => {
          console.log(error, "error from decoding token");
        });
    },
    validateEmail(email) {
      if (/^[\w-.] @([\w-] \.) [\w-]{2,4}$/.test(email)) {
        this.msg["email"] = "Email valid";
      } else {
        this.msg["email"] = "Adress no valid";
      }
    },
   
   
  },

  mounted() {
    this.getProfilUser();
    this.email;
  },
};
</script>

   <form >
                      <div >
                        <label >Prénom</label>
                        <input
                          id="firstname"
                          type="text"
                          
                          v-model="user.firstname"
                        />
                      </div>
                      <div >
                        <label >Nom</label>
                        <input
                          id="lastname"
                          type="text"
                          
                          v-model="user.lastname"
                        />
                      </div>

                      <div >
                        <label for="email" >Email</label>

                        <input
                          id="email"
                          type="email"
                          
                          v-model="user.email"
                        />
                        <span v-if="msg.email">{{ msg.email }}</span>
                      </div>

                      <div >
                      

                        <button
                          type="button"
                          
                          @click.prevent="updateProfil"
                        >
                         register
                        </button>
                      </div>
                    </form>

CodePudding user response：

You forgot about 2-way binding.

First, you should pass v-model to your inputs like this. Don't pass value, v-model will do it for you.

<input
  v-model="email"
  type="email"
  
/>

Second, don't mutate email inside watcher - you'll get into the loop. Just call validateEmail method.

watch: {
  email() {
    this.validateEmail(this.email);
  },
},

That should work then.

CodePudding user response：

There are two email property email and user.email.You are watching only email. but binding user.email in v-modal. so watchers will not call. you can console.log in watchers to check that

solutions:

    watch: {
      'user.email'(newVal){
          this.validateEmail(newVal);
       }
   }

And the other thing is don't use 'this.email' or 'this.user.email' directly on watchers. instead, use newVal as shown in this code. Vue js update all data properly asynchronously so which is not guaranteed for updated value so always use newVal for that.