No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Custom v-model

19/23
Recursos

Aportes 11

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

El espa帽ol es un idioma muy rico, los programadores manejamos dos, recomiendo a la hora se ense帽ar no repetir el mismo nombre, porque los que estamos aprendiendo no sabemos a funcion corresponde la logica

Porejemplo colocaste input mas de 4 veces, cuando pudste colocar, entrada, y luego entradaHija, enrtadaPAdre, y demas鈥 eso es mas ordenado para nuestras cabezas

Conclusion

En los caso en que el padre necesite saber el estado de la alguna data del su componente hijo, se tiene que hacer la vinculaci贸n con v-model.
.
Este v-model es personalizado, pues el nombre de este ser谩 igual al nombre del prop ubicado en props.
.
En el caso de los inputs se necesita hacer uso del v-bind de value, asi como de un metodo que dispare el evento 鈥渦pdate:propName鈥, junto con la data para que se logre esta reactividad que estara presente tanto en la data del padre como en las props del hijo.
.

Para alguien vea una aplicaci贸n vue por primera vez, creo que se har铆a dif铆cil entender solo nociones de html y javascript el c贸digo usando el v-model custom.
De la otra forma, si lograr铆a inferir un poco de como se comunican los componentes, ya que se puede guiar por el nombre de los m茅todos y propiedades

jeje, no me maten, es solo una opini贸n, de igual forma implementar v-model custom nos ayuda a simplificar el c贸digo en el componente padre.

mi c贸digo: 19customv-model.html

馃攧 v-model

Permite una comunicacion en dos sentidos entre el padre y el hijo, se debe especificar el prop del componente y la variable involucrada: v-model:propValue="variableValue"

ejemplo:

app.component("v-input",{
props: {
    inputValue: String
},
methods:{
    changeInput(e){
        this.$emit("update:inputValue",e.target.value)
    }
},
template:`
<input
    type="text"
    v-bind:value="inputValue"
    v-on:input="changeInput"
/>
`
} )

Se crea un componente para ser llamado en el template principal:

template:`
<div>
    <p>{{ text }}</p>
    <v-input 
        v-model:inputValue="text"
    />    
</div>
`

N贸tese c贸mo se usa v-model
Todos mis apuntes en mi github

Muy buena la explicaci贸n.

Deber铆an de planear mejor las clases, los errores los veo bien ya que todos vamos a tener errores a la hora de desarrollar pero como dice el comentario de @andresmu : Hay muchos nombres input y luego el update que no s茅 en qu茅 momento es opcional o por qu茅 lo puso o por qu茅 dice que ahora si es obligatorio鈥 de por s铆 el tema es dif铆cil de entender, ahora m谩s si no planean bien las clases para evitar este tipo de detalles.

toda la documentaci贸n sobre los eventos en Vue

v-model te salvara la vida mas de una ves.
primer aviso

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 app = Vue.createApp({
      data() {
        return {
          text: 'Hello Vue!'
        }
      },
      methods: {
        inputFather(value) {
          this.text = value
        }
      },
      template: `
      <div>
        <p>{{text}}</p>
        <v-input
        v-bind:value="text"
        v-on:update="inputFather"
        />
      </div>
      `
    })

    app.component("v-input", {
      props: {
        value: String
      },
      methods: {
        input(e) {
          this.$emit("update", e.target.value)
        }
      },
      template: `
      <input 
      type="text" 
      v-bind:value="value" 
      v-on:input="input"
      />
      <h2>{{value}}</h2>
      `
    })
    const vm = app.mount("#app");
  </script>
</body>

</html>

Muy interesante el la explicaci贸n del v-model es una de las directivas que mas me costo entender de Vue

<template>
  <div>
    <input
      type="text"
      :value="value" 
      @input="updateValue($event.target.value)" 
      :class="{'invalid':hasError}"
    /> <!-- :value es el prop(comunicacion de padre a hijo) 
            @input se utiliza para escuchar el evento "input" en un elemento de entrada de datos.
            Cuando se dispara el evento "input" (por ejemplo, cuando el usuario escribe en un campo de entrada), 
            se ejecutar谩 updateValue en la directiva v-on:input
            -->
    <span v-if="hasError" class="error-message">{{errorMessage}}</span>
  </div>
</template>


<script>
  export default {
      name: 'CustomImput',
      data(){
        return{
          error: false,
          errorMessage: ''
        }
      },

      props: ['value'],
      methods:{
        updateValue(newValue){
          //Logica de la validacion
          if(newValue.length > 10){
            this.error = true;
            this.errorMessage = 'El texto no puede tener mas de 10 caracteres'
          }else{
            this.error = false;
            this.errorMessage = ''
            this.$emit('update',newValue)  /* Este input es el nombre del evento personalizado que se le pasa al padre */
          }
        }
      },

      computed:{
        hasError(){
          return this.error && this.errorMessage !== ''
        }
      }
      
  };
</script>

<style>
  .invalid {
    border-color: red;
  }
  .error-message {
    color: red;
    font-size: 12px;
  }
</style>