I am trying to create one select
that when clicking on the option, said option or value
the option goes to my textarea.
I tried to do it with a v-on:click
from option
but it doesn't work for me, so I added an v-on:change
in select
so that I could run the method. The problem is that I am displaying the data in a loop for
and obviously the way I am doing it the variable value
is filled with the last value of the loop. You can also see that with the option that I am trying to add the text is with Javascript, it would be interesting to know if it can be done with Vuejs and that the new text does not replace the previous one.
<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>
getElementById()
.v-model
to bind to a DOM element with a key of the objectdata
in your instancetextarea
and forselect
him you must have a keychange
the one that must go in the labelselect
, so at the moment the use ofclick
can be totally discarded .textarea
it and not be overwritten then you need the syntax of:textarea += valorObtenido
Code:
Reference
v-model