Reactividad en JavaScript: Efectos, Trackers y Triggers

Clase 12 de 37 • Curso de Reactividad con Vue.js 3

Resumen

¿Qué son los efectos y cómo se implementan en un mini framework?

Los efectos son fundamentales en la creación de aplicaciones reactivas, pues permiten ejecutar acciones en respuesta a cambios en las dependencias. Cuando una dependencia cambia, los efectos correspondientes se ejecutan automáticamente. Hacerlo eficazmente requiere un mapa de dependencias, que facilita el rastreo y la ejecución de efectos según sea necesario.

Para comenzar a implementarlo:

Crea un mapa de dependencias utilizando new Map.
Asegúrate de que cada vez que se accede a una propiedad dinámica, se registre en el tracker.
Construye efectos como funciones que se activan cuando ocurre un cambio en las dependencias que supervisan.

Esta implementación permite que los efectos actualicen la interfaz sin necesidad de intervención manual, manteniendo la vista siempre sincronizada con los datos subyacentes.

¿Cómo se utilizan los trackers y triggers?

Los trackers y triggers son las herramientas que permiten rastrear y reaccionar a los cambios en los datos. Principalmente, se usan para:

Trackers: Seguir el acceso a las propiedades de los objetos para determinar cuándo un efecto debe ser ejecutado.
Triggers: Activar los efectos asociados cuando una propiedad de los datos es modificada.

Para implementar un tracker:

Dentro del getter de una propiedad, llama a la función del tracker, pasando el objeto y el nombre de la propiedad para registrar el acceso.

Para implementar un trigger:

En el setter de la propiedad, una vez detectada una modificación, utiliza el trigger para ejecutar los efectos relacionados.

Este enfoque asegura que cada interacción con los datos esté debidamente monitoreada y manipulada, permitiendo respuestas inmediatas a cambios de estado.

¿Cómo extender la reactividad con nuevas directivas?

Para incrementar la potencia y flexibilidad de un framework, puedes desarrollar nuevas directivas reactivas. Aquí, se sugiere crear una directiva que vincule atributos HTML específicos con propiedades reactivas. Por ejemplo, una nueva directiva pivide podría enlazar el source de una imagen con un recurso dinámico.

Pasos para crear la directiva pivide:

Diseña su lógica para sincronizar el atributo src de una etiqueta <img> con una propiedad reactiva.
Facilita el enlace entre los datos y el DOM para reflejar automáticamente los cambios sin intervención del desarrollador.

Reto práctico

Desarrolla la directiva pivide:

Objetivo: Vincular imágenes a fuentes dinámicas dentro de tu estructura de datos reactiva.
Pistas: Usa selectores para identificar tanto el atributo HTML a modificar como la propiedad reactiva que debe actualizarse.

Esta práctica te llevará a profundizar en la comprensión de las interacciones reactivas y te dará más control sobre cómo los datos fluye y refleja en la interfaz de usuario.

Juan Esteban Galvis

student•

Reto solucionado!!!!

HTML aplicando directiva:

<img p-bind="src:image">

image en data

 data() {
                return {
                    message: "Hola Platzi",
                    image: "https://www.manejandodatos.es/wp-content/uploads/2018/02/vueJS.png"
                };
            }

Recorrer elementos con directiva p-bind ( en mount() ):

document.querySelectorAll('*[p-bind]').forEach(Element => {
            let Atributo = Element.getAttribute('p-bind').split(':')[0];
            let Valor = Element.getAttribute('p-bind').split(':')[1];
            
            this.pBind(Element, this.$data, Atributo, Valor)
        })

Método pBind() :

pBind(element, origin, attribute, value) {
        element.setAttribute(attribute, Reflect.get(origin, value));
    }

Samuel Burbano

teacher•

Súper! Probaste creando un input que use image ? y cambiarlo manualmente a ver si la imagen responde a tu código reactivo?

Manuel Del Pozo Matías

student•

Buen aporte, solo como recomendación:

El nombre de las variables en minúsculas.
Podrías usar ++destructuring assignment++ en la imagen 3 y te ahorras unas lineas, así:

let [attr, value] = el.getAttribute('p-bind').split(':') this.pBind(el, this.$data, attr, value);

Carlos Eduardo Gomez García

teacher•

Wow... me acabo de aventar un código más similar a Vue, en mi caso lo quise hacer con el formato de Vue:

<img p-bind:src="image" p-bind:id="imageId">

En Vue el atributo se pone después de p-bind, además, en Vue puedes tener varios "bindeos", por lo que mi data sería esta:

data() {
    return {
        message: "Hola Vue", 
        image: "https://via.placeholder.com/600/771796",
        imageId: "myId"
    }
},

Para hacer esto funcionar hice una busqueda de todos elementos y filtré por los que tuvieran v.bind, recorrí cada uno y también recorrí cada atributo de dicho elemento para ver cuáles había que bindear, por lo que a pBind le paso los datos más el atributo a bindear:

Array.from(document.querySelectorAll("*"))
.filter(el => {
    // Metemos en un array sus atributos y los recorrermos
    return [...el.attributes].some(
        attr => attr.name.startsWith('p-bind:')
    )
})
.forEach(el => {
    [...el.attributes].forEach(attribute => {

        const name = attribute.value;
        const attr = attribute.name.split(":").pop();

        this.pBind(el, this.$data, name, attr);

    })
});

En pBind me aprovecho del reflect que ya teníamos para establecer dicho atributo (puede ser CUALQUIER tributo), yo hice la prueba con src y con id``` (con class`` no funciona porque hay que hacer otras movidas xD):

pBind(el, target, name, attr) {

    Reflect.set(el, attr, Reflect.get(target, name))

}

Para hacerlo reactivo simplemente en el set hago la misma búsqueda pero esta vez filtrando por el atributo que necesito:

Array.from(document.querySelectorAll("*"))
.filter(el => {
    // Metemos en un array sus atributos y los recorrermos
    return [...el.attributes].some(
        attr => attr.name.startsWith('p-bind:') && attr.value == name
    )
})
.forEach(el => {
    console.log(el);
    [...el.attributes].forEach(attribute => {

        const value = attribute.value;
        const attr = attribute.name.split(":").pop();
        if(name == value)
            this.pBind(el, target, name, attr);

    })
});

¡Y funciona! Tiene algunos cuántos detalles pero funciona xD . Este es el código completo funcionando:

https://github.com/RetaxMaster/mini-vue/tree/b6d8da9e9c081f9e761970398b03759dfa852002

Samuel Burbano

teacher•

Wow! Está súper genial!

Joel alexander

student•

1. Attributo en el tag

<img p-bind="src:foto" alt="imagen">

2. Dentro de mount

document.querySelectorAll('*[p-bind]').forEach(el => {
  const attribute = el.getAttribute('p-bind');
  this.pBind(el, this.$data, attribute)
})

3. codigo de la directiva

pBind(el, target, attr) {
  const [attribute, key] = attr.split(':')
 el.setAttribute(attribute, Reflect.get(target, key))
}

Joel Andres Bonilla Tellez

student•

Buenísima solución

Diego Lozano

student•

Para resolver el reto

En el html agregué

<input type="text" p-model="image" />
<br>
<div>
    <img p-bind="src:image">
</div>

en el archivo js, en la función mount agregué

document.querySelectorAll('*[p-bind]').forEach(el => {
  const [attr, name] = el.getAttribute('p-bind').match(/(\w+)/g);
  this.pBind(el, this.$data, name, attr);
});

Luego agregue la función pBind

pBind(el, target, name, attr) {
  el.setAttribute(attr, Reflect.get(target, name));
}

luego para observar los cambios de la información que se ingresa el input, agregue en la funcion track

document.querySelectorAll('*[p-bind]').forEach(el => {
  const [attr, nameBind] = el.getAttribute('p-bind').match(/(\w+)/g);
  this.pBind(el, target, nameBind, attr);
});

Fernando Obregon

student•

Mi explicacón sobre esta clase: Generamos una variable dependencias es cual solo almacena el nombre de los objetos que definimos en nuestra data() y su efecto el cual en este caso era nuestra funcion p-text (cambiar el innerHTML).

En la funcion GET de nuestro proxy implementamos la llamada a la función lo que esto quiere decir es: Cuando alguien quiera acceder al valor de X tambien ejecuta el efecto que tenga asociado dentro de deps y si no tiene asociado nada le creamos un efecto. En resúmen es eso

Jose Alberto Reyes Quevedo

student•

Agregue un nuevo input para poder editar el src de mi componente img

<input type="text" p-model="url">
<img p-bind="src:url" />

Edite la data inicial para tener una imagen por defecto

            const app = createApp({
                data() {
                    return {
                        message: "Hello Vue!",
                        url: "https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png"
                    }
                }
            });

dentro del mount agregue esto para darle un valor inicial al atributo

        document.querySelectorAll("*[p-bind]").forEach(el => {
            const [attr, name] = el.getAttribute('p-bind').match(/(\w+)/g);
            this.pBind(el, this.$data, name, attr)
        });

el pBind le da el valor al atributo

    pBind(el, target, name, attr) {
        el.setAttribute(attr, Reflect.get(target, name));
    }

Y agregue este snippet dentro del effect handler, con lo que el valor del atributo se actualiza siempre que la data cambia de valor

                document.querySelectorAll(`*[p-bind*=${name}]`).forEach((el) => {
                    const [attr, name] = el.getAttribute("p-bind").match(/(\w+)/g);
                    this.pBind(el, target, name, attr);
                });```

Carlos Manuel Pérez Carrizal

student•

IMG

Carlos Manuel Pérez Carrizal

student•

Carlos Manuel Pérez Carrizal

student•

MOUNT

Carlos Manuel Pérez Carrizal

student•

pBind

Manuel Ojeda

student•

Reto solucionado:

En el HTML tenemos:

<img p-bind="src:image" />

Y en mi data:

data() {
  return {
	message: "Hola Platzi!",
        image: 'https://pbs.twimg.com/media/EiNmaOCXsAI2sp-.png'
  };
}

Para la implementación de tal como lo menciono mi compañero Juan, salvo la diferencia fue que añadí en el effect que se ejecute el pBind tmb

track (target, name) {
    if (!this.deps.has(name)) {
      const effect = () => {
        document.querySelectorAll([`*[p-text=${name}]`]).forEach(el => {
          this.pText(el, target, name)
        })
        document.querySelectorAll('*[p-bind]').forEach(el => {
          const [attr, name] = el.getAttribute('p-bind').match(/(\w+)/g)
          this.pBind(el, this.$data, name, attr)
        })
      }
      this.deps.set(name, effect)
    }
  }

Con esto si el model y el bind tienen un atributo similar la reactividad funciona

Estuardo Alexander Ramos Salazar

student•

mi aporte al reto

img

<img p-bind="src:image" />

data

data(){
return {
image: "https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_vue_icon_130078.png",
}
}

mount

document.querySelectorAll("*[p-bind]").forEach((el) => {
      const name = el.getAttribute("p-bind");

      this.pBind(el, this.$data, name.split(":"));
    });

pBind

pBind(el, target, name) {
    el.setAttribute(name[0], Reflect.get(target, name[1]));
  }

Primus Group

student•

mucha paja!! creo que se fue muy a fondo del tema principal

Jorman Espinoza

student•

Sume un input para editar la imagen en el html
Agregue un listener a cada atributo de tipo p-bind sumando el atributo src para el selector dentro del dentro del track
Agregue un listener a cada atributo de tipo p-bind dentro del mount llamando al pBind

Html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hola Mundo!</title>
</head>

<body>
    <div id="app">
        <span p-text="message"></span>
        <br>
        <input type="text" p-model="message">

        <br>
        <input type="text" p-model="image">
        <br>
        <img p-bind="src:image">
    </div>

    <script src="./platzi.js"></script>
    <script>
        const { createApp } = Platzi;

        const app = createApp({
            data() {
                return {
                    message: 'Hola Platzi!',
                    image: 'https://via.placeholder.com/600/771796'
                };
            }
        });

        app.mount();
    </script>
</body>

</html>

Javascript

class PlatziReactive {
    // Dependencies
    deps = new Map();

    constructor(options) {
        const self = this;

        // Origin
        this.origin = options.data();

        // Target
        this.$data = new Proxy(this.origin, {
            get(target, name) {
                if (!(Reflect.has(target, name))) {
                    console.warn('La propiedad', name, 'no existe');
                    return '';
                }

                self.track(target, name);
                return Reflect.get(target, name);
            },
            set(target, name, value) {
                Reflect.set(target, name, value);
                self.trigger(name);
            }
        });
    }

    track(target, name) {
        if (!(this.deps.has(name))) {
            const effect = () => {
                document.querySelectorAll(`*[p-text=${name}]`).forEach(e => {
                    this.pText(e, target, name);
                });

                document.querySelectorAll(`*[p-bind='src:${name}']`).forEach(e => {
                    this.pBind(e, target, name, 'src');
                });
            };

            this.deps.set(name, effect);
        }
    }

    trigger(name) {
        const effect = this.deps.get(name);
        effect();
    }

    mount() {
        document.querySelectorAll('*[p-text]').forEach(e => {
            this.pText(e, this.$data, e.getAttribute('p-text'));
        });

        document.querySelectorAll('*[p-model]').forEach(e => {
            const name = e.getAttribute('p-model');
            this.pModel(e, this.$data, name);

            e.addEventListener('input', () => {
                Reflect.set(this.$data, name, e.value);
            });
        });

        document.querySelectorAll('*[p-bind]').forEach(e => {
            const [attr, name] = e.getAttribute('p-bind').match(/(\w+)/g);
            this.pBind(e, this.$data, name, attr);

            e.addEventListener('input', () => {
                Reflect.set(this.$data, name, e.value);
            });
        });
    }

    pText(e, target, name) {
        e.innerText = Reflect.get(target, name);
    }

    pModel(e, target, name) {
        e.value = Reflect.get(target, name);
    }

    pBind(e, target, name, attr) {
        e.setAttribute(attr, Reflect.get(target, name));
    }
}

const Platzi = {
    createApp(options) {
        return new PlatziReactive(options);
    }
};

Julian David Alzate Cuervo

student•

muy buena solución

SANTIAGO OCHOA

student•

Así lo resolvi:

class PlatziReactive { deps = new Map(); constructor(options) { ``this``.origin = options.data() const self = ``this``; ``this``.$data = new Proxy(``this``.origin, { get(target, name) { if (Reflect.has(target, name)) { self.track(target, name) return Reflect.get(target, name) } console.warn('la propiedad ', name, ' no existe'); }, set(target, name, value) { Reflect.set(target, name, value) self.trigger(name); } }) } track(target, name) { if (!``this```.deps.has(name)) { const effect = () => { document.querySelectorAll([p-text=${name}]).forEach(el => { ```this```.pText(el, target, name) }); document.querySelectorAll([p-model=${name}]).forEach(el => { const name = el.getAttribute('p-model'); ```this``.pModel(el, ``this``.$data, name); }); document.querySelectorAll('*[p-bind=[a-zA-Z]+:${name}]').forEach(el => { const [attr, name] = el.getAttribute("p-bind").split(":") ``this``.pBind(el, ``this``.$data, attr, name); }); } ``this``.deps.set(name, effect); } } trigger(name) { const effect = ``this``.deps.get(name); effect() } pModel(el, target, name) { el.value = Reflect.get(target, name); } pText(el, target, name) { el.innerHTML = Reflect.get(target, name); } pBind(el, target, attr, name) { console.log(Reflect.get(target, name)) el.setAttribute(attr, Reflect.get(target, name)); } mount() { document.querySelectorAll('*[p-text]').forEach(el => { ``this``.pText(el, ``this``.$data, el.getAttribute('p-text')); }); document.querySelectorAll('*[p-model]').forEach(el => { const name = el.getAttribute('p-model'); ``this``.pModel(el, ``this``.$data, name); el.addEventListener('input', () => { Reflect.set(``this``.$data, name, el.value) }) }); document.querySelectorAll('*[p-bind]').forEach(el => { const [attr, name] = el.getAttribute("p-bind").split(":") ``this``.pBind(el, ``this``.$data, attr, name); }) }} var Platzi = { createApp(options) { return new PlatziReactive(options); }}

Dany Pascual Gomez Sanchez

student•

Resumen del reto:

index.html<img id="img" p-bind="src:image"> data() { return { message: "Mensaje...", password: "Contraseña...", image: 'https://via.placeholder.com/600/771796' } }```js <img id="img" p-bind="src:image">

data() {
return {
message: "Mensaje...", password: "Contraseña...",
image: 'https://via.placeholder.com/600/771796' }
}

clase.js
1. Array para imágenes aleatorias:this.imagesArray = [ 'https://via.placeholder.com/600/771796', 'https://via.placeholder.com/600/456123', 'https://via.placeholder.com/600/345765', 'https://via.placeholder.com/600/456623', 'https://via.placeholder.com/600/987834', 'https://via.placeholder.com/600/765345', 'https://via.placeholder.com/600/987734', 'https://via.placeholder.com/600/098089', 'https://via.placeholder.com/600/454565', 'https://via.placeholder.com/600/123321',]```js this.imagesArray = [ 'https://via.placeholder.com/600/771796', 'https://via.placeholder.com/600/456123', 'https://via.placeholder.com/600/345765', 'https://via.placeholder.com/600/456623', 'https://via.placeholder.com/600/987834', 'https://via.placeholder.com/600/765345', 'https://via.placeholder.com/600/987734', 'https://via.placeholder.com/600/098089', 'https://via.placeholder.com/600/454565', 'https://via.placeholder.com/600/123321', ]
2. Funcion para obtener img aleatoria dentro de un vector:getRandomImg(){ const index = Math.floor(Math.random() * 10); console.log('index: ' + index); return this.imagesArray[index]; }```js getRandomImg(){
  const index = Math.floor(Math.random() * 10);
  console.log('index: ' + index);
  return this.imagesArray[index];
  }
3. Dentro del track para el pmodel, agregue esto para hacer dinamica la carga de la imagen al escribir en los inputs:document.querySelectorAll(\*\[p-bind]).forEach( elemento => { this.origienDatos['image'] = this.getRandomImg(); this.setImgSource(elemento, originData, 'image', "src"); });this.dependencias.set(propiedaNombre+'-images', efectoAttrSrc);```js document.querySelectorAll(*[p-bind]).forEach( elemento => {
  this.origienDatos['image'] = this.getRandomImg();
  this.setImgSource(elemento, originData, 'image', "src");
  }); this.dependencias.set(propiedaNombre+'-images', efectoAttrSrc);
4. Efecto: // p-bind="src:image" const efectoAttrSrc = () => { document.querySelectorAll(\*\[p-bind="src:=${propiedaNombre}"]).forEach( elemento => { this.setImgSource(elemento, originData, propiedaNombre, "src"); }); }```js const efectoAttrSrc = () => {
  document.querySelectorAll(*[p-bind="src:=${propiedaNombre}"]).forEach( elemento => {
  this.setImgSource(elemento, originData, propiedaNombre, "src");
  });
  }
5. Trigger: Disparador. const efecto_src = this.dependencias.get(propiedaNombre+'-images'); efecto_src();
```
const efecto_src =  this.dependencias.get(propiedaNombre+'-images'); efecto_src();
```
6. En el mount:document.querySelectorAll('*[p-bind]').forEach((elemento) => { const [atributo, nombre] = elemento.getAttribute('p-bind').match(/(\w+)/g); this.setImgSource(elemento, this.$dataProxy, nombre, atributo); })```js document.querySelectorAll('*[p-bind]').forEach((elemento) => {
  const [atributo, nombre] = elemento.getAttribute('p-bind').match(/(\w+)/g);
  this.setImgSource(elemento, this.$dataProxy, nombre, atributo);
  })
7. Funcion de seteo para cambio del src:setImgSource(elemento, originData, propiedaNombre, atributo){ elemento.setAttribute(atributo, Reflect.get(originData, propiedaNombre)); }```js setImgSource(elemento, originData, propiedaNombre, atributo){
  elemento.setAttribute(atributo, Reflect.get(originData, propiedaNombre));
  }

Dany Pascual Gomez Sanchez

student•

Resumen del reto:

1. index.html <img id="img" p-bind="src:image"> data() { return { message: "Mensaje...", password: "Contraseña...", image: 'https://via.placeholder.com/600/771796' } }

2. clase.js =>

this.imagesArray = [ 'https://via.placeholder.com/600/771796', 'https://via.placeholder.com/600/456123', 'https://via.placeholder.com/600/345765', 'https://via.placeholder.com/600/456623', 'https://via.placeholder.com/600/987834', 'https://via.placeholder.com/600/765345', 'https://via.placeholder.com/600/987734', 'https://via.placeholder.com/600/098089', 'https://via.placeholder.com/600/454565', 'https://via.placeholder.com/600/123321', ]

Dentro del track para el pmodel, agregue esto para hacer dinamica la carga de la imagen al escribir en los inputs:

document.querySelectorAll(\*\[p-bind]).forEach( elemento => { this.origienDatos['image'] = this.getRandomImg(); this.setImgSource(elemento, originData, 'image', "src"); });

Efecto: // p-bind="src:image" const efectoAttrSrc = () => { document.querySelectorAll(\*\[p-bind="src:=${propiedaNombre}"]).forEach( elemento => { this.setImgSource(elemento, originData, propiedaNombre, "src"); }); }

Trigger:

const efecto_src = this.dependencias.get(propiedaNombre+'-images'); efecto_src();

En el mount:

document.querySelectorAll('*[p-bind]').forEach((elemento) => { const [atributo, nombre] = elemento.getAttribute('p-bind').match(/(\w+)/g); //console.log('atributo: ' + atributo + ' / nombre: ' + nombre); this.setImgSource(elemento, this.$dataProxy, nombre, atributo); })

Funcion de seteo para cambio del src: setImgSource(elemento, originData, propiedaNombre, atributo){ elemento.setAttribute(atributo, Reflect.get(originData, propiedaNombre)); }

Funcion para obtener img aleatoria dentro de un vector:

getRandomImg(){ const index = Math.floor(Math.random() * 10); console.log('index: ' + index); return this.imagesArray[index]; } this.dependencias.set(propiedaNombre+'-images', efectoAttrSrc);

Brayan Stiven Castaño Zuluaga

student•

Solo como aporte a los códigos de los compañeros que lo publicaron, me es facinante poner aprueba el p-bind, entendiendo que se expande a muchas otras propiedades de etiquetas html

<span p-text="message" p-bind="title:message"></span>
<input p-model="message" p-bind="placeholder:holder" type="text">

Esta super entender cómo funciona la reactividad. Gracias Samuel por compartir tu conocimiento

Ameth Ordoñez Erazo

student•

Yo lo hice con la sintaxis de Vue, y funciona con cualquier v-bind (aunque en mi framework yo lo llamo a-bind)

La etiqueta img queda así:

<img a-bind:src="imagen" a-bind:width="ancho" />

El objeto data() queda así:

 data() {
          return {
            message: "Hola Ameth.js!",
            ancho: "300px",
            imagen:
              "https://assetsnffrgf-a.akamaihd.net/assets/m/2020162/univ/art/2020162_univ_lsr_lg.jpg",
          };
        },

En el mount obtengo un array con un listado de todos los elementos HTML, luego recorro todos sus atributos hasta filtrarlos por los que empiezen con a-bind. Una vez tenga esa lista, recorro nuevamente los atributos de esos elementos filtrados, luego obtengo el valor de la propiedad enlazada separando el nombre por ":" (dos puntos), y tambien el valor que tiene el atributo, y mando esos valores a la función aBind para que renderice.

Así queda el mount()

Y así es la función aBind():

aBind (el, target, name, attr) {
    el.setAttribute(attr, Reflect.get(target, name))
  }

Rafiel Taveras

student•

Solución del reto:

HTML con la directiva:

<img r-bind=“src:image” width=“360px” height=“400px”>

Data:

data() {
	return {
            message: "Hola mundo con mi framework",
            image: "https://images.pexels.com/photos/11721770/pexels-photo-11721770.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          };
},

Recorriendo los elementos r-bind en el mount

document.querySelectorAll("*[r-bind]").forEach((el) => {
	const [attr, name] = el.getAttribute(“r-bind”).match(/(\w+)/g);
	this.rBind(el, this.$data, name, attr);
});

Metodo rBind:

rBind(el, target, name, attr) {
	el.setAttribute(attr,Reflect.get(target,name))
}

Resultado

https://prnt.sc/txWv6cQxOrwT Con la ayuda del maestro pude introducirme a las expresiones regulares al tratar de entender el código de ayuda que nos dió.

No encontré la forma de acerlo reactivo ante el input :(