Vue中使用textarea标签统计并展示用户还可输入文字长度的错误做法以及解决方法

最近在做一个项目，在做“用户评论”时有个评论长度限制，假设可输入最长文本为140，需要在页面展示用户可输入长度，这是一个很简单的需求，但我在用常规的方法却产生了bug，下面看看这个bug吧。

下面展示的是评论界面：

下面是一个动图展示bug：

从动图可清晰展示：当输入一次文字后，再按键盘继续输入文字时，前面已输入的文本会自动清空。

下面是我产生这个bug的代码：

<template>
      <div>
	      	<textarea :value="content"
	                maxlength=140
	                @input="textareaChange"
	                placeholder="评论">
	        </textarea>
	        <!-- 展示仍可输入长度的span标签 -->
	        <span>{
    
    {
    
    remainLength}}</span>
      </div>
</template>
<script>
export default{
    
    
	data(){
    
    
		return {
    
    
			remainLength:140
		}
	},
	methods:{
    
    
		textareaChange(e){
    
    
			this.remainLength=e.target.maxLength-e.target.textLength
		}
	}
}
</script>

经过一番测试，最终发现是高频率改变data中的remainLength产生的bug，因为只要在textareaChange函数不绑定修改data中的数据，就能正常的输入文本。

行吧，既然不能高频率改变data的remainLength，那使用< span > { { remainLength }} </ span >展示仍可输入文字长度的方法就行不通了，然后我就想到了用最原始的方法：手动操作DOM。

给span标签添加id=“inputableLength”,直接操作DOM：

textareaChange (e) {
    
    
      document.getElementById('inputableLength').innerText = e.target.maxLength - e.target.textLength;
    }

这就解决了bug，本来Vue等框架就是减少程序员对DOM的操作，最终还是通过操作DOM解决问题。