CODEWITHSUNDEEP
javascriptvue.js
kidsit
kidsit

Reputation: 287

vuejs v-html render bingding value delayed: must trigger with a mouse click in and out of textarea control

I have following issue: There is a textarea which is v-model with a value. That value is rendered with {{{value}}} , my issue is: When I change the textarea control content with a javascript, that {{{value}}} will not be rendered right away. I must do a click in and out of textarea. live fiddle is here: https://jsfiddle.net/matiascx/bbpmn39e/3/

html is here: <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> js is here: new Vue({ el: '#app', data: { content: 'this is the inital content data' }, methods: { insertTag: function(){ var textel = document.getElementById('textarea'); textel.value = textel.value + '<em>this is em</em>'; } } })

Upvotes: 0

Views: 594

Answers (1)

g.annunziata
g.annunziata

Reputation: 3266

The basic VueJS paradigm is to acts on data, not on html widget value.
insertTag function should be something like:

insertTag: function() {
   this.content = this.content + '<em>this is em</em>';
}

You can see working example here

Upvotes: 2

Related Questions