@change不会以编程方式更改值

Question

我在下面的textarea中有一个更改事件。

<textarea @change="inputChanged" ref="input">

当我手动输入数据＆＃39; inputChanged＆＃39;叫做。 但是当我使用位于页面顶部的按钮以编程方式更新值时。

this.$refs.input.value = "Hello";

textarea更新了值＆＃39; Hello＆＃39;但是＆＃39; inputChanged＆＃39;。不叫。

这是为什么？如何才能将变更事件首先发送到编程文本变更？理想情况下，我不想使用JQuery。

Answer 1

您可以使用v-model绑定文本区域，然后使用计算属性来获取/设置值。查看文档here

HTML

<textarea v-model="text">

打字稿

computed:{
  text:{
    get(){
      return this.$refs.input.value;
    },
    set(value){
      if(this.$refs.input.value != value){
        this.$refs.input.value = value;
        // Do other stuff here
      }
    }
  }
}