Breaking

Post Top Ad

Your Ad Spot

miércoles, 21 de octubre de 2020

Cómo usar VueJS con jQuery

En el último artículo, convertimos el formulario de respuesta en un componente de Vue y vimos lo bueno que era tener propiedades de datos reactivas para manejar la edición y actualización de una respuesta. En este artículo, podemos construir sobre ese componente Responder y convertir la función de eliminación en una versión impulsada por ajax también. Además, veremos cómo puede seguir haciendo uso de jQuery junto con VueJS para agregar acciones de tipo de animación jQuery muy simples a su componente. El resultado final debe ser una respuesta que se elimine sin actualizar la página, y comentarios en tiempo real y actualizaciones de la página para el usuario final.


Del formulario HTML al método Vue

La función de eliminación funciona bien como la tenemos ahora, pero preferimos usar ajax y nuestro componente Vue para crear ese efecto en tiempo real en la página. Al omitir JavaScript, usamos un formulario html completo con un botón anidado dentro para completar la función de eliminación de esa manera.

reply.blade.php

Con un poco de trabajo en nuestra instancia de Vue y algunos arreglos del método destroy () en el RepliesController, podremos usar este marcado simple para el botón eliminar en la vista.


Añadiendo el método destroy ()

Necesitaremos agregar un método destroy () a la instancia de Vue ya que estamos tratando de activar ese método cuando se hace clic en el botón de eliminar. Al ejecutar Vue en modo de desarrollo, incluso nos alertará de que debemos encargarnos de esto. Cuando visitamos una página con un componente de respuesta, obtenemos el error en la consola de: “[Vue warn]: la propiedad o método“ destroy ”no está definido en la instancia, pero se hace referencia durante el renderizado. Asegúrese de que esta propiedad sea reactiva, ya sea en la opción de datos o para los componentes basados ​​en clases, inicializando la propiedad ".
método no definido en la instancia de vue


Arrancar el monitor de archivos

Ahora vamos a comenzar a trabajar con el componente Vue, por lo que debemos iniciar el observador de archivos. Lo ejecutaremos con hilo de observación.
encuesta de reloj de ejecución de hilo


Actualizando Reply.vue

Aquí agregamos el método destroy () a nuestra instancia de Vue.


Un error extraño

Intentar eliminar una respuesta es en realidad eliminar el hilo en sí. El método destroy () en el RepliesController debe arreglarse.


esperaJson () en los métodos del controlador

Dado que hemos eliminado el formulario en la vista, y ahora estamos enviando una solicitud ajax al servidor, el método que maneja esa solicitud ajax debe actualizarse para manejar esta acción.

Ahora, el método puede determinar si hay una solicitud ajax en juego aquí. Si es así, regresamos de inmediato sin redireccionamiento. También enviamos una respuesta de estado de 'Respuesta eliminada'. Probar esto en el navegador parece haber solucionado esto, como vemos aquí. Hacemos clic en el botón Eliminar, y cuando inspeccionamos los encabezados, vemos que la solicitud DELETE se realizó a http://forum.io/replies/6 y el estado es 200 ok. Al hacer clic en la pestaña "respuesta" también se muestra el mensaje de {"estado": "Respuesta eliminada"}.
encabezados de herramientas de desarrollador de Chrome


jQuery al rescate

Hay ocasiones en las que solo desea una simple línea para actualizar algo en la página. Para este tipo de cosas, jQuery sigue siendo difícil de superar. En este momento, cuando se hace clic en el botón Eliminar, la respuesta se elimina de la base de datos. Sin embargo, no hay recarga de la página ya que la eliminación se completó a través de ajax. Por tanto, la respuesta todavía está en la página. Idealmente, debería desaparecer una vez que se elimine. Podemos actualizar el método destroy () en la instancia de Vue para solucionar este problema. El código resaltado simplemente desvanecerá el elemento en el transcurso de 1 segundo, luego activará un mensaje flash una vez completado.

¡Se ve muy bien!
VueJS con jQuery


¿Qué pasa con la protección CSRF?

Quizás se esté preguntando, bueno, dado que nos deshicimos del formulario que contenía un token CSRF para protección, ¿este nuevo enfoque es menos seguro? De hecho, no es porque Laravel se haya encargado de esto en el archivo bootstrap.js. Si inspecciona ese archivo, encontrará este fragmento con los comentarios que explican exactamente lo que está sucediendo.


Cómo usar VueJS con jQuery Resumen

Este fue un pequeño tutorial divertido y rápido que nos hizo cambiar un botón basado en un formulario por una solicitud de eliminación para un formulario Vue y una solución ajax impulsada por Axios con un toque de jQuery incluido en buena medida. No lo olvide, deberá actualizar el método del controlador en Laravel para acomodar la solicitud ajax, y vio cómo lo hicimos con el método esperaJson ().


No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas