动态更新值时如何在vue.js中更新文本区域的高度？

Question

与Vue.js一起使用时，我确实使用一种简单的方法来动态设置键入时会调整大小的文本区域的高度。但是当组件安装或值更新时，我无法执行此操作。

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

我创建了一个沙箱来显示问题，在输入要更新的框时显示问题，但在值动态变化时不会显示

实时示例：https://codesandbox.io/s/53nmll917l

Answer 1

您需要一种triggerInput()方法：

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

可以在您以编程方式更改值时使用，从而在{<1> real ” <textarea>事件上触发input使用的调整大小逻辑。

Updated codesandbox。

注意：如果没有$nextTick()包装器，即使input 已应用，最近更改的值也不会被应用 触发，元素尚未更新，并且调整大小在value更改之前发生，导致旧的height看起来好像没有发生。