Tengo un pequeño problema con mi aplicación Vue.
Aquí tengo un archivo .vue llamado Module1.vue, donde el usuario debe ingresar una dirección de correo electrónico.
<template> <div class="row"> <div class="column"> <span>Emailadresse</span> </div> <div class="column column2"> <input id="inputMail" type="text" placeholder="Bsp: franken@stein.öö"/> </div> <span ref="mailSpan1" id="mailSpan"></span> </div> </templateLuego creé un método que debería verificar la corrección del formato del correo electrónico. Y para mostrar en un lapso si el correo electrónico es válido o no.
module.exports = { name: "Emaildaten Baustein", props: {}, data() { }, methods:{ checkInput(){ let email = document.getElementById('inputMail'); let spanMail = document.getElementById('mailSpan'); email.onkeydown = function(){ const regex = /^([\.\_a-zA-Z0-9]+)@([a-zA-Z]+)\.([a-zA-Z]){1,8}$/; const regexo = /^([\.\_a-zA-Z0-9]+)@([a-zA-Z]+)\.([a-zA-Z]){1,3}\.[a-zA-Z]{1,3}$/; if(regex.test(email.value) || regexo.test(email.value)) { spanMail[0].value="Your email is valid"; spanMail[0].style.color= 'lime'; } else { spanMail[0].value="Your email is invalid"; spanMail[0].style.color= 'red'; } } } }, mounted(){ this.checkInput(); } };Ahora, cuando ejecuto mi aplicación y escribo algo, aparece este error:
Uncaught TypeError: Cannot set property 'value' of undefined at HTMLInputElement.email.onkeydown (eval at C (httpVueLoader.js:86), <anonymous>:32:29)Para su información: uso este componente Module1.vue en otro componente. Esto se ve así:
<template> <header-component></header-component> <email-component></email-component> //Module1.vue <footer-component></footer-component> </template>Ya encontré el error. Tú no puedes hacer
spanMail[0].value="Your email is valid";en cambio lo hice
spanMail.textContent="Your email is valid";Creo que el problema está aquí:
spanMail[0].value="Your email is valid";Está inicializando su variable spanMail con:
let spanMail = document.getElementById('mailSpan'); y getElementById(id) devuelve un Element real, no la lista de Elements . Entonces su código debería ser más como:
spanMail.value="Your email is valid";