时间戳

首页 > 解决方案 > 动态更新值时如何更新vue.js中textarea的高度？

vue.js - 动态更新值时如何更新vue.js中textarea的高度？

问题描述

使用 Vue.js，我确实使用了一种简单的方法来动态设置在键入时调整大小的文本区域的高度。但是当组件安装或值更新时，我无法做到这一点。

我已经尝试过http://www.jacklmoore.com/autosize/，但它有同样的问题。

我创建了一个显示问题的沙箱，在键入它更新的框时，但不是在值动态更改时

现场示例：https ://codesandbox.io/s/53nmll917l

行动中的问题

标签： vue.js

解决方案

你需要一个triggerInput()方法：

triggerInput() {
  this.$nextTick(() => {
    this.$refs.resize.$el.dispatchEvent(new Event("input"));
  });
}

每当您以编程方式更改值时使用，触发<textarea>在“真实”input事件上使用的调整大小逻辑。

更新了代码框。

注意：如果没有包装器，最近更改的值将不会被$nextTick()应用，即使触发了，元素还没有更新并且之前发生的调整大小已经改变，导致旧的并且看起来没有发生。input valueheight

推荐阅读