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.