0

He empezado a aprender Vue js, y haciendo un ejercicio didáctico me he encontrado con el problema de usar v-model dentro de componentes. No consigo pasar valores de un input que ha sido creado desde un componente a los datos de mi instancia de Vue

En este caso particular, quiero los distintos saludos según el idioma seleccionado en un checbox o en un dropdown, generado desde un componente como mencionaba.

Inserto código html :

 <div id="aplicacion">

    <checkbox></checkbox>
    <selectone></selectone>

    <result v-bind:idioma="idioma"></result>
    <result v-bind:idioma="idioma"></result>
    <result v-bind:idioma="idioma"></result>

    <pre>{{idioma}}</pre>

</div>

Y añado además el código de los componentes y de la instancia de Vue que he creado :

Vue.component('result', {
props: ['idioma'],
template: `<div>
                <p v-if="idioma=='castellano'">Hola</p>
                <p v-if="idioma=='ingles'">Hello</p>
                <p v-if="idioma=='euskera'">Kaixo</p>
            </div>`
});

  Vue.component('checkbox', {
template: `  <div>
    <label for="castellano">Castellano</label>
    <input v-model="idioma" value="castellano" type="checkbox" name="" id="castellano">
    <label for="inglés">Inglés</label>
    <input v-model="idioma" value="ingles" type="checkbox" name="" id="inglés">
    <label for="euskera">Euskera</label>
    <input v-model="idioma" value="euskera" type="checkbox" name="" id="euskera">
</div>
  `,
 data: function () {
return {
    idioma:[]
}
}
 });

Vue.component('selectone', {
template: ` <div>
<select v-model="idioma" name="" id="">
<option value="castellano">Castellano</option>
<option value="ingles">Inglés</option>
<option value="euskera">Euskera</option>
</select>
</div>
`,
data: function () {
return {
    idioma:[]
}
}
});

var app = new Vue({
el: "#aplicacion",
data: {
    idioma:[]
    }
});

Intento imprimir en todo momento el valor de ´idioma[]´ localizado en data pero en ningún momento consigo que contenga algún valor seleccionado.

Muchas gracias de antemano.

1
  • Te aconsejo que para este tipo de ejemplos uses vue single file components ya que es mucho mas facil de entender para los que traten de ayudarte
    – jogarcia
    Commented el 23 ago. 2020 a las 17:28

1 respuesta 1

2

Lo primero que se puede ver es que no pasas el valor de idioma al componente hijo checkbox por lo que no hay manera de que tengas la situación actualizada. Luego en el componente checkbox tampoco realizas nada para comunicar los cambios al componente padre por lo tanto es normal que no veas los valores cambiados en idioma.

Lo primero pasamos el dato idioma al componente hijo checkbox, añado un bucle for para que veas como va cambiando según se seleccione los checkboxs

 <div id="aplicacion">

    <checkbox :idioma.sync="idioma"></checkbox>

   <div v-for="x in idioma">
     {{x}}
   </div>
    <selectone></selectone>

    <result v-bind:idioma="idioma"></result>
    <result v-bind:idioma="idioma"></result>
    <result v-bind:idioma="idioma"></result>

    <pre>{{idioma}}</pre>

</div>

En el componente hijo checkbox recibimos el dato de idioma para ello lo definimos en props, que son los datos que se recibe del componente padre. Luego si vamos a la documentación de vuejs nos indica que una opción es usar v-model que nos da la opción de doble data binding. No es buena idea modificar los datos de props por lo que en este caso vamos a crear una propiedad computada, ya que además nos servirá para emitir el evento de actualización al padre. Para eso usamos this.$emit("update:{idioma}" y por tanto el componente padre actualiza los datos de idioma

  Vue.component('checkbox', {
template: `  <div>
    <label for="castellano">Castellano</label>
    <input v-model="idiomaProxy" value="castellano" type="checkbox" n>
    <label for="inglés">Inglés</label>
    <input v-model="idiomaProxy" value="ingles" type="checkbox" >
    <label for="euskera">Euskera</label>
    <input v-model="idiomaProxy" value="euskera" type="checkbox"  >
</div>
  `,
 props:{
   idioma:Array
 },
    computed:{
      idiomaProxy:{
        get(){return this.idioma},
        set(value){ this.$emit('update:idioma', value)}
      }
    }
 });

Espero que te funcione.

1
  • Muchísimas gracias por la respuesta :)
    – naumb
    Commented el 19 feb. 2020 a las 13:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.