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

1
2
3
4
5
6
7
8
<div class="panel-footer level">
    <button @click="editing = true" class="btn btn-xs mr-1">Edit</button>
    <form method="POST" action="/replies/{{$reply->id}}">
        {{ csrf_field() }}
        {{ method_field('DELETE') }}
        <button class="btn btn-danger btn-xs">Delete Reply</button>
    </form>
</div>

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.

1
2
3
4
<div class="panel-footer level">
    <button @click="editing = true" class="btn btn-xs mr-1">Edit</button>
    <button @click="destroy" class="btn btn-xs btn-danger mr-1">Delete</button>
</div>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
    export default {
        props: ['attributes'],
 
        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        },
 
        methods: {
            update() {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });
                this.editing = false;
                flash('Updated!');
            },
 
            destroy() {
                axios.delete('/replies/' + this.attributes.id);
                flash('Your reply is now deleted!');
            }
        }
    };
</script>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
public function destroy(Reply $reply)
{
    $this->authorize('update', $reply);
 
    $reply->delete();
    
    //  if there is an ajax request, do not redirect
    if (request()->expectsJson()) {
        return response(['status' => 'Reply deleted']);
    }
    
    return back();
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
    export default {
        props: ['attributes'],
 
        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        },
 
        methods: {
            update() {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });
                this.editing = false;
                flash('Updated!');
            },
 
            destroy() {
                axios.delete('/replies/' + this.attributes.id);
 
                $(this.$el).fadeOut(1000, () => {
                    flash('Your reply is now deleted!');
                });
            }
        }
    };
</script>

¡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.

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */
 
let token = document.head.querySelector('meta[name="csrf-token"]');
 
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}