vuejsv-html渲染binding值延迟:必须通过鼠标在文本区域控件内外点击触发

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

本文关键字：控件区域文本鼠标延迟 binding 渲染 vuejsv-html 更新时间：2023-09-26

我有以下问题：有一个文本区域是带有值的v-model。该值是用{{{value}}}呈现的，我的问题是：当我用javascript更改文本区域控件内容时，该{{{value}}}将不会立即呈现。我必须点击进出文本区域。现场小提琴在这里：https://jsfiddle.net/matiascx/bbpmn39e/3/

html在这里：<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在这里：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>'; } } })

VueJS的基本范式是对数据进行操作，而不是对html小部件值进行操作
insertTag函数应该类似于：

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

您可以在这里看到工作示例