Enlace VueJS Textarea

En nuestra aplicación, podemos crear un nuevo hilo y dejar una respuesta a cualquier hilo. También podemos eliminar cualquier hilo o respuesta en función de los permisos permitidos de las políticas que habíamos configurado. Ahora queremos poder editar una respuesta. En lugar de eliminar una respuesta por completo, queremos poder simplemente hacer clic en un botón, corregir cualquier texto que no nos guste y luego guardar rápidamente esa edición. En este tutorial, usaremos VueJS y el enlace textarea para crear un componente de respuesta que nos permitirá hacer precisamente eso.

hilos / reply.blade.php

Comenzando en el archivo de vista reply.blade.php, comenzaremos agregando un botón de edición simple.

1
2
3
4
5
6
7
8
9
10
@can('update', $reply)
    <div class="panel-footer level">
        <button 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>
@endcan

El objetivo será que cuando un usuario haga clic en el botón de edición, el área que se ve resaltada a continuación se transformará en un área de texto donde el usuario puede actualizar el texto y luego enviar una solicitud ajax al finalizar para guardar los cambios. De esta manera, no hay redirecciones, etc., lo que hace que la acción de edición sea una experiencia muy fluida.
área de texto dinámico vuejs

Una plantilla en línea de Vue

Hay algunas formas de configurar esto, pero lo que tiene sentido aquí es usar un Componente Vue pero hacer la plantilla para ese componente en línea. Lo que eso significa es que estamos envolviendo el archivo de vista existente dentro de un componente. El marcado para eso se ve así.

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
31
32
33
34
35
36
37
38
<reply inline-template>
    <div id="reply-{{ $reply->id }}" class="panel panel-default">
 
        <div class="panel-body">
            <div class="level">
                <h5 class="flex">
                    <a href="{{ route('profile', $reply->owner) }}">
                        {{$reply->owner->name}}
                    </a> said {{ $reply->created_at->diffForHumans() }}
                </h5>
 
                <div>
                    <form method="POST" action="/replies/{{$reply->id}}/favorites">
                        {{csrf_field()}}
                        <button type="submit" class="btn btn-primary {{ $reply->isFavorited() ? 'disabled' : '' }}">
                            {{ $reply->favorites_count }} {{ str_plural('Favorite', $reply->favorites_count) }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
 
        <div class="panel-body">
            {{ $reply->body }}
        </div>
 
        @can('update', $reply)
            <div class="panel-footer level">
                <button 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>
        @endcan
    </div>
</reply>

La carga de la página en el navegador se interrumpiría en este punto. Vería un mensaje de "app.js: 32407 [Vue warn]: Elemento personalizado desconocido:- ¿Registraste el componente correctamente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre". (encontrado en) ”. Eso se debe a que todavía necesitamos crear ese componente de respuesta.
Vue advertir elemento personalizado desconocido

Registre un nuevo componente VueJS en Laravel

Ahora podemos comenzar el proceso de registro y creación del componente <reply> que necesitamos. En su IDE, puede visitar resources / assets / js / app.js y agregar el nuevo componente.

1
2
3
4
5
6
7
8
9
10
11
require('./bootstrap');
 
window.Vue = require('vue');
 
Vue.component('flash', require('./components/Flash.vue'));
 
Vue.component('reply', require('./components/Reply.vue'));
 
const app = new Vue({
    el: '#app'
});

Observe que ahora estamos registrando dos componentes de Vue. Puede ver el registro para el componente flash que creamos en el tutorial del componente de ejemplo. Ahora está seguro de crear el archivo Reply.vue dentro del directorio de componentes así.
nuevo archivo de componente vue

Exportar la instancia de Vue

Lo primero en el <script> del componente que completamos es exportar la instancia de Vue.

1
2
3
4
5
<script>
    export default {
 
    }
</script>

Activar la visualización de archivos

Debido a que ahora estamos trabajando con Vue y editando archivos JavaScript, necesitamos activar la observación de archivos para que cuando actualicemos los archivos se recompilen automáticamente. Enciéndalo con npm run watch o yarn run watch.

vagrant @ homestead: ~ / Code / forumio $ yarn run watch

reloj de hilo

Ahora, con solo el esqueleto del componente en su lugar, se borra el mensaje de error que estábamos viendo en las herramientas de desarrollo de Vue.

v-if v-else y propiedades de datos

Cuando hacemos clic en el botón editar, queremos activar de alguna manera la capacidad de editar. Para lograr esto, podemos adjuntar un detector de eventos al elemento de botón en el archivo de vista. El marcado aquí dice, cuando se hace clic en el botón, queremos establecer una editingpropiedad en true.

1
2
3
4
5
6
7
8
9
10
@can('update', $reply)
    <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>
@endcan

Determinación de la visibilidad en función del valor de la propiedad

Ahora, dentro del área del panel donde mostramos una respuesta, usaremos las directivas v-if y v-else vuejs para determinar si mostraremos un <div> o un <div> diferente. Entonces, a continuación, si la edición es verdadera, entonces vemos un área de texto. De lo contrario, veremos el texto de respuesta estándar de la respuesta en la página.

1
2
3
4
5
6
7
8
9
<div class="panel-body">
    <div v-if="editing">
        <textarea></textarea>
    </div>
 
    <div v-else>
        {{ $reply->body }}
    </div>
</div>

Declaración de propiedades reactivas

Necesitamos asegurarnos de que la propiedad editingesté definida en la instancia de Vue. De lo contrario, veremos un error en las herramientas de Vue Dev de "[Vue warn]: la" edición "de propiedad o método no está definida en la instancia, pero se hace referencia a ella 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 ". Con eso en mente, ahora podemos actualizar Rely.vue así:

1
2
3
4
5
6
7
8
9
<script>
    export default {
        data() {
            return {
                editing: false
            };
        }
    };
</script>

Si un usuario hace clic en el botón editar, la editingpropiedad se establece en truey, como por arte de magia, vemos el cuadro de texto. ¡Muy genial!
ejemplo de v-if v-else

También podemos ver la relación de cómo funciona esto en este diagrama.
relaciones de propiedad de datos de vue js

Pasar valores de atributo de HTML a una instancia de Vue

Un requisito que casi siempre necesitará es poder pasar valores de atributo desde el lado HTML a la instancia de Vue. Esto se hace a través de accesorios. En nuestro caso, queremos acceder a los datos contenidos en la variable $ reply desde el lado de Laravel. Cómo hacemos esto? Bueno, vamos a repetir la respuesta $ para completar el valor de un atributo en el HTML mismo. Luego, configuramos la propiedad props en la instancia de Vue para aceptar lo que se contenga en el atributo particular con el que estamos tratando. En nuestro caso, nombramos la propiedad attributes.

En nuestro archivo reply.blade.php, especificaremos esto así:

1
<reply :attributes="{{ $reply }}" inline-template>

La instancia de Vue ahora también se actualizará con accesorios.

1
2
3
4
5
6
7
8
9
10
11
<script>
    export default {
        props: ['attributes'],
 
        data() {
            return {
                editing: false
            };
        }
    };
</script>

Con las tuberías en su lugar, Vue ahora tiene acceso completo a todos los datos contenidos en la variable $ reply. Al abrir las herramientas de desarrollo de Vue, podemos ver que el componente <Reply> ahora tiene esos datos.

Completar elementos HTML con v-model

También deberá poder tomar los datos que están contenidos en la instancia de Vue y usarlos para completar el marcado en el lado HTML. Esto se puede lograr con v-model . Por ejemplo, cuando hacemos clic en ese botón de edición, se presenta un área de texto. Sin embargo, el área de texto está en blanco. Lo que realmente queremos es el texto de la respuesta para poder editarlo. Bueno, ahora que tenemos acceso a esos datos dentro de Vue, podemos vincularlos al área de texto con un modelo v. Así es como lo haremos.

Aplicar la directiva v-model en reply.blade.php

1
2
3
4
5
6
7
8
9
<div class="panel-body">
    <div v-if="editing">
        <textarea v-model="body" class="form-control"></textarea>
    </div>
 
    <div v-else>
        {{ $reply->body }}
    </div>
</div>

Ahora vinculamos los datos contenidos en la bodypropiedad del attributesobjeto como en Reply.vue.

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    export default {
        props: ['attributes'],
 
        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        }
    };
</script>

El resultado es que ahora, cuando se hace clic en el botón de edición, se muestra el área de texto. Sin embargo, esta vez, dado que el modelo v está en su lugar y está buscando los datos contenidos en la bodypropiedad, el área de texto también se completa con el texto que nos interesa. De nuevo, ¡muy hábil!
ejemplo de enlace de vue v-model

Otro diagrama muestra la relación entre el modelo v y los datos en la instancia de Vue.
ejemplo de enlace de elemento de modelo v

Agregar un botón Cancelar

Entonces, hizo clic en el botón editar, pero decidió que la respuesta está bien. No necesita actualizar nada, solo desea cancelar el proceso de edición. Todo lo que tiene que hacer es editingvolver a establecer la propiedad falsey el área de texto de edición ya no se muestra. Entonces, podemos agregar un botón como lo hacemos a continuación, configurar el evento @click para asignar el valor de falso a la propiedad de edición cuando se hace clic en ella, y como magia una vez más, la interfaz de usuario se actualiza muy rápidamente.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="panel-body">
    <div v-if="editing">
        <div class="form-group">
            <textarea v-model="body" class="form-control"></textarea>
        </div>
        <button @click="editing = false" class="btn btn-xs btn-warning">Cancel</button>
    </div>
 
    <div v-else>
        {{ $reply->body }}
    </div>
</div>

visibilidad basada en datos vue

Agregar un botón Guardar

Es necesario que haya un botón para guardar los cambios que realice si decide editar el texto. Podemos agregar el marcado de la siguiente manera, que dice, cuando haga clic en este botón, llame al método update () en la instancia de Vue. Aún no hemos creado ese método, pero lo haremos en un minuto.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="panel-body">
    <div v-if="editing">
        <div class="form-group">
            <textarea v-model="body" class="form-control"></textarea>
        </div>
        <button @click="update" class="btn btn-xs btn-success">Save</button>
        <button @click="editing = false" class="btn btn-xs btn-warning">Cancel</button>
    </div>
 
    <div v-else>
        {{ $reply->body }}
    </div>
</div>

Usando Axios para Ajax con Vue

Ahora llegamos a lo divertido. Necesitamos tomar medidas al llamar al método update () en Vue. ¿Qué queremos lograr? Bueno, queremos guardar los datos asociados con el modelo v nuevamente en la base de datos a través de una solicitud ajax a Laravel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    export default {
        props: ['attributes'],
 
        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        },
 
        methods: {
            update() {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });
            }
        }
    };
</script>

Configurando la API en el lado de Laravel

El código de Vue está listo para funcionar. Cuando hacemos clic en el botón Guardar, se activa el método update () en la instancia de Vue. Ese método, como podemos ver arriba, dispara una solicitud ajax usando axios al punto final de las respuestas con el ID de la respuesta como comodín. Además, la carga útil enviada es la bodypropiedad que contiene el texto actualizado ingresado en el área de texto. Este punto final aún no existe en el lado de Laravel, por lo que debemos configurarlo.

Crea una prueba para la API

Primero, podemos configurar una nueva prueba en nuestra clase ParticipateInForumTest.

1
2
3
4
5
6
7
8
9
10
public function test_authorized_users_can_update_replies()
{
    $this->signIn();
 
    $reply = create('AppReply', ['user_id' => auth()->id()]);
 
    $this->patch('/replies/' . $reply->id, ['body' => 'Text has been edited!']);
 
    $this->assertDatabaseHas('replies', ['id' => $reply->id, 'body' => 'Text has been edited!']);
}

Luego, podemos agregar la ruta adecuada a nuestro archivo de rutas en web.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
Route::get('/', function () {
    return view('welcome');
});
 
Auth::routes();
 
Route::get('/home', 'HomeController@index')->name('home');
 
Route::get('/threads', 'ThreadsController@index');
Route::get('/threads/create', 'ThreadsController@create');
Route::get('/threads/{channel}/{thread}', 'ThreadsController@show');
Route::delete('/threads/{channel}/{thread}', 'ThreadsController@destroy');
Route::post('/threads', 'ThreadsController@store');
Route::get('/threads/{channel}', 'ThreadsController@index');
Route::post('/threads/{channel}/{thread}/replies', 'RepliesController@store');
Route::patch('/replies/{reply}', 'RepliesController@update');
Route::delete('/replies/{reply}', 'RepliesController@destroy');
Route::post('/replies/{reply}/favorites', 'FavoritesController@store');
Route::get('/profiles/{user}', 'ProfilesController@show')->name('profile');

Y finalmente, podemos agregar el método update () al RepliesController.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
 
namespace AppHttpControllers;
 
use AppReply;
use AppThread;
use IlluminateHttpRequest;
 
class RepliesController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }
 
    public function store($channelId, Thread $thread)
    {
        $this->validate(request(), [
            'body' => 'required'
        ]);
 
        $thread->addReply([
            'body' => request('body'),
            'user_id' => auth()->id()
        ]);
 
        return back()->with('flash', 'Your reply was published!');
    }
 
    public function update(Reply $reply)
    {
        $reply->update(request(['body']));
    }
 
    public function destroy(Reply $reply)
    {
        $this->authorize('update', $reply);
 
        $reply->delete();
 
        return back();
    }
}

Ejecutar la prueba muestra que estamos listos para comenzar.

vagabundo @ homestead: ~ / Code / forumio $ phpunit --filter test_authorized_users_can_update_replies
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

. 1/1 (100%)

Tiempo: 893 ms, memoria: 10,00 MB

OK (1 prueba, 1 afirmación)

También deberíamos agregar una prueba para usuarios no autorizados. No queremos que actualicen las respuestas que no deberían.

1
2
3
4
5
6
7
8
9
10
11
public function test_unauthorized_users_can_not_update_replies()
{
    $reply = create('AppReply');
 
    $this->patch('/replies/' . $reply->id)
        ->assertRedirect('/login');
 
    $this->signIn()
        ->patch('/replies/' . $reply->id)
        ->assertStatus(403);
}

Entonces, para esto, también necesitaremos hacer uso de la política que creamos durante esta serie. Esto asegurará que solo los usuarios autorizados puedan actualizar una respuesta.

1
2
3
4
5
6
public function update(Reply $reply)
{
    $this->authorize('update', $reply);
    
    $reply->update(request(['body']));
}

Actualizar la vista una vez completada

Tenga la seguridad de que el código anterior actualizará la base de datos a través de la solicitud ajax que estamos haciendo. Ahora, queremos asegurarnos de que veamos la respuesta actualizada inmediatamente sin necesidad de actualizar la página. ¿Como hacer esto? Dentro del método update (), una vez que todo termina, la editingpropiedad debería volver a establecerse en false. También podemos agregar una llamada rápida a la función flash () para que, aunque no haya una recarga de página completa, seguirá apareciendo un mensaje flash.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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!');
            }
        }
    };
</script>

Lo que hace es hacer que v-else se active en el archivo de vista una vez que se completa la actualización (). Sin embargo, solo hay un problema. El contenido del cuerpo se repite a través de Laravel y ese es el texto antes de la edición.

1
2
3
<div v-else>
    {{ $reply->body }}
</div>

No queremos ver el texto antiguo, queremos ver el nuevo texto actualizado. Eso significa que no deberíamos rellenar manualmente el HTML, deberíamos hacer que Vue rellene el HTML dinámicamente a través de sus capacidades vinculantes. Si cambiamos este marcado para usar v-text así, entonces deberíamos estar bien.

1
<div v-else v-text="body"></div>

¡Parece que editar en tiempo real sin recargar la página funciona muy bien!
vue actualización instantánea en la página

Deshacerse de cargas de páginas extrañas

Es posible que observe que, si está siguiendo, cuando vuelve a cargar la página, el área de texto se está cargando de manera extraña. Observe el área de texto mientras recargamos manualmente la página. No está bien.
representación de elementos extraños

v-cloak al rescate

v-cloak le permite agregar un atributo a un elemento hasta que todo esté completamente cargado. Me recuerda como cuando pones todo tu jquery en una función .ready () y le dice al código que espere hasta que esta página esté completamente cargada y lista para funcionar. Entonces, lo que queremos hacer es no mostrar el elemento mientras se carga la página. Esto es lo que está causando que ese elemento extraño salte en la página. Entonces, en el nivel superior del componente, simplemente agregaremos la directiva v-cloak así.

1
<reply :attributes="{{ $reply }}" inline-template v-cloak>

Y en nuestro CSS, podemos definir lo siguiente:

1
2
3
4
5
<style>
    [v-cloak] {
        display: none;
    }
</style>

Ahora, mientras las cosas se cargan, el componente dinámico ni siquiera se mostrará. Cuando se complete la carga, Vue eliminará automáticamente ese bit de CSS definido por v-cloak y verá el elemento en la página sin artefactos ni saltos de página.
ejemplo de v-cloak

Resumen de enlace de VueJS Textarea

Este fue un tutorial divertido y bastante complicado. Vimos exactamente cómo trabajar con VueJS en el navegador en conjunto con Laravel actuando como la API en el servidor para crear edición y actualización de páginas en tiempo real sin necesidad de recargar la página manualmente. Esto le da al usuario final una experiencia de usuario realmente fluida y elegante, y fue muy divertido configurarlo para nosotros, los desarrolladores.

Header Ads Widget