如何在动态更新值时更新 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"));
  });
}

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

更新了codesandbox。

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