Inputs reactivos

Atributos -> :

Eventos -> @

Guillermo Castaño Vèlez

Me gusta cuando saltan errores en los cursos, la solución de estos hace parte de nuestra labor día a día y no todo puede salir perfecto

Marcos Joel Sánchez López

en efecto en mi poco tiempo de programación aprendo más cuando hay errores que cuando todo me ejecuta correctamente a la primera. asi que espero ver más errores!!!

George Bryant Gutiérrez Gastélum

Puede usar la directiva v-model para crear bindings de datos bidireccionales (two-way binding) en elementos input, textarea y select de un formulario.
v-model es esencialmente syntax sugar para actualización de datos a través de eventos de entradas del usuario,

Andrés Felipe Lopez gomez

Me gusta como la profe explica, se vuelve la clase muy amena y entendible

raparisg

Un golazo el v-model. Le quedaría bueno al mundo React algo así 😃

Alba Guzman

Profe, en verdad lo que más apreciamos es tu gran habilidad para comunicar de forma práctica y efectiva los contenidos vistos. ¡Muchas gracias!

Andrés Felipe Lopez gomez

La profesora explica muy bien, me esta gustando mucho este curso

leobuezo

Para mantener sincronizada la vista con el modelo se asigna el value de target a la variable correspondiente. Ej: this.text = e.target.value; donde e se refiere a la instancia del evento.

v-on y v-bind suelen aplicarse juntos por lo que para simplificar aún más el código tenemos la directiva v-model (ej: <input v-model=“text” />). No se necesitan métodos del tipo event handler para mantener sincronizado el estado del componente con el modelo.

Carlos Rodríguez

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

<head>
    <meta charset="UTF-8">
    <meta name="Description" content="Extended Description">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Inputs reactivos</title>
    <link rel="stylesheet" href="">

    <style>

    </style>

</head>

<body>
    <script src="https://unpkg.com/vue@3"></script>

    <div id="app"></div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: 'Hola Vue',
                    text2: 'Hola Vue',
                    text3: 'Hola Vue',
                };
            },
            methods: {
                input(e) {
                    // Indiretamente modifico el valor de p en el html
                    this.text = e.target.value;
                },
                input2(e) {
                    // Indiretamente modifico el valor de p en el html
                    this.text2 = e.target.value;
                },
            },
            // v-on:change detecta el evento al cambiar el texto
            // v-on:input detecta el evento al al cambiar el texto en tiempo real
            // Se puede resumir:
            // v-on:event="funct"       --> @event="funct"
            // v-bind:attr="var-value"  --> :attr="var-value"
            // v-model="var-react" nos da reactividad entre componentes
            template: `
                <p>{{ text }}</p>
                <input type="text" v-on:change="input">
                <p>{{ text2 }}</p>
                <input
                    type="text"
                    @input="input2"
                    :value="text2"
                >
                <p>{{ text3 }}</p>
                <input
                    type="text"
                    v-model="text3"
                >
            `,
        }).mount('#app');
    </script>

</body>

</html>

Andrey Felipe Gomez Villa

Mi aporte

<body>
    <script src="https://unpkg.com/vue@3"></script>
    <div id="app">
        <h1>{{count}}</h1>
        <button @click="incrementar">Incrementar</button>
        <button @click="disminuir">Disminuir</button>
        <div>
            <h2>{{text}}</h2>
            <input v-model="text">
        </div>
    </div>
    
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0,
                    text: 'Hola vue!!'
                }
            },

            methods: {
                incrementar(){
                    this.count++;
                },

                disminuir(){
                    this.count--;
                },
                input(e){
                    this.text = e.target.value
                }
            },

            
        }).mount('#app')
        //console.log(vm);
    </script>
</body>

Carlos Arturo Rueda Calier

ejemplo de las dos formas

   const vm = Vue.createApp({
        data() {
          return {
            text: "Hello Vue",
            text2: "texto dos",
          };
        },
        methods: {
          input(e) {
            this.text = e.target.value;
          },
        },
        template: `
            <p>{{text}}</p>
            <input type="text" @input="input" :value="text"/>
            <input type="text" v-model="text2"/>
            <p>{{text2}}</p>
        `,
      }).mount("#app");

Ángela Sofía Osorio García

Cuando trabajamos con formularios en el frontend, a menudo necesitamos sincronizar el estado de los elementos de entrada del formulario con el estado correspondiente en JavaScript. Puede ser tedioso configurar manualmente las vinculaciones de valores y los escuchadores de eventos de cambio, como se muestra en el ejemplo a continuación:

<input
  :value="text"
  @input="event => text = event.target.value">

La directiva v-model nos ayuda a simplificar lo anterior a:

<input v-model="text">

Además, v-model se puede utilizar en diferentes tipos de elementos de entrada, como elementos de texto (<input>), elementos de área de texto (<textarea>), y elementos de selección (<select>). Se expande automáticamente para ajustarse a diferentes pares de propiedades y eventos del DOM según el elemento en el que se utiliza:

Los elementos <input> de tipo texto y los elementos <textarea> utilizan la propiedad value y el evento input.
Los elementos <input> de tipo checkbox y <input> de tipo radio utilizan la propiedad checked y el evento change.
Los elementos <select> utilizan la propiedad value como una prop y el evento change como un evento.

Esta funcionalidad simplifica significativamente la manipulación de formularios en Vue.js, facilitando la sincronización del estado del formulario con el estado de la aplicación JavaScript.

Camilo Andres Pinto Angulo

Yo hice un pequeño enjemplo en el que combine el contador de la clase pasada y el input reactivo de esta, es algo simple, pero bueno.

<!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>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app"></div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    number: "1"
                };
            },
            methods:{
                increment(){
                    this.number++;
                },
                decrement(){
                    this.number--;
                }
            },
            template: `
                <p>{{ number }}</p>
                <input
                    type="number"
                    v-model="number"
                />
                <button @click="increment"> +1 </button>
                <button @click="decrement"> -1 </button>
            `
        }).mount("#app");
    </script>
</body>
</html>

Ariel González Falcón

Like si te diste cuenta que estabas caminando descalzo con JS Vanilla jajaja

Jose Alejandro Pantoja Giraldo

Chulada de v-model

Edgardo Augusto Rivas Escalona

Una calculadora sencilla :

Captura de pantalla 2022-11-06 a la(s) 11.30.24 p. m..png

Mauricio Combariza

Este mismo ejemplo se hace en la clase de manipulación del DOM y la diferencia en simplificación y fácilidad es increíble

John Ortiz

hace 6 meses

Me ha gustado bastante la exposición de esta lección. Practico en VS Code cada ejemplo y también lo escribo a mano alzada en mi aplicación de notas OneNote.

WALTER GERARDO GONZÁLEZ SÁNCHEZ

Buenas tardes Compañeros, Este es un ejemplo que realice.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <div>
            <h2>{{ altertext.titulo }}</h2>
            <p>{{ altertext.subtitulo }}</p>
            <input type="number" v-model="altertext.text"/>
            <button @click = "increase()">+</button>
            <button @click = "decrease()">-</button>
            <button @click = "restart()">Reset</button>
        </div>
        <p>{{ altertext.text }}</p>
        
    </div>
    <script>
        const { createApp } = Vue;
        const counter = 0;

        createApp({
            data(){
                return {
                    altertext: {
                        text: 0,
                        titulo: 'Sumar y restar',
                        subtitulo: 'Introduce el numero'
                    }
                }
            },
            methods: {
                increase() {
                     this.altertext.text++;
                     console.log('Aumenta: ', this.altertext.text);
                },
                decrease() {
                    this.altertext.text--;
                    console.log('Disminuye: ', this.altertext.text);
                },
                restart() {
                    this.altertext.text = counter;
                    console.clear();
                    console.log('Limpia y Reinicia: ', this.altertext.text);
                }
            },
        }).mount('#app')
    </script>
</body>
</html>

Axel Jimenez Cruz

La mayor diferencia entre Bind y Model por lo que investigue es que:

Bind es un enlace unidireccional, lo que significa que solo se puede actualizar el atributo, pero los cambios en el atributo no afectarán la variable.
Model es un enlace bidireccional, lo que significa que cualquier cambio en el input se reflejará en la variable y cualquier cambio en la variable actualizará el input.

Juan Becerra

Para usar todo lo aprendio realice este ejercicio usando un formulario que acepta el nombre del usuario y su contraseña

 <script>
      const { createApp } = Vue;

      createApp({
        data() {
          let nameInput = "";
          let passInput = "";
          return {
            nameInput,
            passInput,
          };
        },
        methods: {
          onSubmit(e) {
            const form = e.target;
            const formData = new FormData(form);
            const userName = formData.get("userName");
            const userPass = formData.get("userPass");
            const userInfo = {
              userName,
              userPass,
            };
            console.log(userInfo);
            this.nameInput = "";
            this.passInput = "";
          },
        },
        template: `
        <form v-on:submit.prevent="onSubmit">
          <input type="text" name="userName" placeholder="Alberto" v-model="nameInput" />
          <br />
          <input type="password" name="userPass" placeholder="****" v-model="passInput" />
          <br />
          <button type="submit">submit info</button>
        </form>
        `,
      }).mount("#app");
    </script>

Daniel Briceño

Mis apuntes

<!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>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app"></div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            text: "Hello Vue",
          };
        },
        /* methods: {
          input(event) {
            console.log(event.target.value);
            this.text = event.target.value;
          },
        }, */
        // template: `
        // <p>{{ text }}</p>
        // <input type="text" v-on:change="input" />
        // `,
        /* alias para poder utilizar
        Atributos -> :
        Eventos -> @
        : -> v-on
        @ -> v-bind

        La directiva v-model nos permite sincronizar el modelo y la vista, por lo que no necesitaremos los manejadores de eventos (methods)
        */
        /* template: `
        <p>{{ text }}</p>
        <input
          type="text"
          @input="input"
          :value="text"
        />
        `, */
        template: `
        <p>{{ text }}</p>
        <input
          type="text"
          v-model="text"
        />
        `,
      }).mount("#app");
      console.log(vm);
    </script>
  </body>
</html>

Cristhian Coaquira

Asi resolvi el reto anterior

<div id="app">
  <p>{{ counter }}</p>
  <button type="submit" v-on:click="counter++">Incrementar</button>
  <button type="submit" v-on:click="counter--">Decrementar</button>
</div>

Cristian David Casallas Velandia

Para poner en práctica lo aprendido hice uso del two-way-data binding y utilicé un metodo para hacer un alert de lo escrito.

Julian David Alzate Cuervo