Tengo una página de inicio de sesión donde una vez que presiona el botón de inicio de sesión, su entrada se envía al servidor y recibe datos de vuelta. En el caso de que los datos enviados por el usuario sean falsos, quiero informar al usuario. He visto personas que usan sesiones rápidas para resaltar los campos en rojo para esto, pero eso me parece muy complejo, así que prefiero usar algo como un brindis de arranque que se puede activar a través de JS.

El problema que tengo es que no sé cómo editar correctamente el cuerpo de las tostadas con Vue.

Aquí está el código para la respuesta que obtienes del servidor.

 async function loginUser(event) { event.preventDefault(); const result = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: usernameField.value, password: passwordField.value }) }).then(res => res.json()); if (result.status === 'ok'){ document.cookie = "token=" + result.data.toString(); window.location.href='/dashboard'; }else if(result.status === 'error'){ resultMessage = result.error; //!!! This value is set to null by default. !!! showToast(); } }

Aquí está el método showToast que se llama si hay errores de inicio de sesión

 function showToast(){ var toastComponent = new bootstrap.Toast(errToast, option); // Option is how long the toast stays up for, and if it should have an animation toastComponent.show(); }

Y aquí está el código Vue

 const toast = Vue.createApp({ data() { return { message: resultMessage } } }) toast.mount('#errorToast');

El problema es que esta variable Vue de "mensaje" está configurada como nula en el montaje. Pensé que tal vez haya una manera de cambiar la variable del mensaje FUERA de Vue, pero no creo que sea posible.

Estoy bastante seguro de que no puedo usar el complemento vue-toast-notification porque estoy usando la versión CDN de Vue, no la compilación real (corríjame si me equivoco).

¡Si puedes, por favor ayuda! ¿Cómo cambio el cuerpo de las tostadas cada vez que recibo un error del servidor?