Estoy tratando de crear un select
que al darle clic a la opción dicha opción o el value
de la opción se vaya a mi textarea.
Traté de hacerlo con un v-on:click
desde el option
pero no me funciona, así que agregué un v-on:change
en el select
para que me pudiese ejecutar el método. El problema es que estoy mostrando los datos en un bucle for
y evidentemente de la forma que lo estoy haciendo la variable value
se llena con el último valor del bucle. Además pueden ver que con la opción que estoy intentando agregar el texto es con Javascript, sería interesante saber si se puede hacer con Vuejs y que el texto nuevo no me reemplace al anterior.
<div id="app">
<p v-on:click="addToText()">{{message}}</p>
<select name="" id="tt" v-on:change="selectToText()">
<option value="">Select</option>
<option v-for="option in options" v-bind:value="value = option">{{option}}</option>
</select><br>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: "VueJS",
options: ['option 1', 'option 2', 'option 3'],
value: ""
},
methods: {
selectToText() {
document.getElementById('textarea').value = this.value;
console.log('added');
}
}
});
</script>