vue.js优先观察者不从事表单提交

Question

我的页面正在显示用户数据，他可以编辑。 我正在处理一个小型项目。我想用Regex进行表格验证，但什么也没有发生。当我写一封不尊重正则语法的电子邮件时，没有显示任何消息。 当正则有效时，验证消息也不会出现。

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 class="background-style">
                      <div class="form-group">
                        <label class="form-label">Prénom</label>
                        <input
                          id="firstname"
                          type="text"
                          class="form-control"
                          v-model="user.firstname"
                        />
                      </div>
                      <div class="form-group">
                        <label class="form-label">Nom</label>
                        <input
                          id="lastname"
                          type="text"
                          class="form-control"
                          v-model="user.lastname"
                        />
                      </div>

                      <div class="form-group">
                        <label for="email" class="form-label">Email</label>

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

                      <div class="btn rounded p-1">
                      

                        <button
                          type="button"
                          class="rounded p-2"
                          @click.prevent="updateProfil"
                        >
                         register
                        </button>
                      </div>
                    </form>

Answer 1

有两个电子邮件属性电子邮件和user.email.you仅观看电子邮件。但是绑定用户。因此，观察者不会打电话。您可以在观察者中进行委托。以检查该

解决方案：

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

另一件事是直接在观察者上直接使用“ this.email”或“ this.user.email”。相反，如本代码所示，请使用newval。 VUE JS不适合更新所有数据，因此不能保证更新值，因此请务必为此使用NewVal。

Answer 2

您忘记了大约2条绑定。

首先，您应该将V-Model传递给您的输入。不要通过value，v-model将为您完成。

<input
  v-model="email"
  type="email"
  class="form-control"
/>

其次，不要在Watcher中突变电子邮件 - 您将进入循环。
只需调用validateMail方法。

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

那应该起作用。