I'm currently experiencing an issue with a textarea that is bound to a v-model with a specific value. The problem arises when the content of the textarea is changed via JavaScript - the displayed value, represented by {{{value}}}, doesn't update immediately. Instead, I have to click into and out of the textarea for the change to take effect. You can view a live example in this JSFiddle link.
Below is the HTML code snippet:
<div id="app">
<textarea name="test" id="textarea" cols="30" rows="10" v-model="content"></textarea>
<hr>
<button @click="insertTag">insert strong tag</button>
{{{ content }}}
</div>
new Vue({
el: '#app',
data: {
content: 'this is the initial content data'
},
methods: {
insertTag: function(){
var textel = document.getElementById('textarea');
textel.value = textel.value + '<em>this is em</em>';
}
}
})