@change 不会触发以编程方式更改的值 [英] @change not firing on programmatically changed values

问题描述

我有以下带有更改事件的文本区域.

I have the below textarea with a change event.

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

当我手动输入数据时，会调用inputChanged".但是，当我使用页面顶部的按钮以编程方式更新值时.

When I manually enter data 'inputChanged' is called. However when I used a button that that is at the top of the page to update the value programatically.

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

textarea 更新为 'Hello' 但为 'inputChanged'.不叫.

The textarea updates with the value 'Hello' however 'inputChanged'. Is not called.

这是为什么?以及如何在编程文本区域更改时首先获得更改事件?理想情况下，我不想使用 JQuery.

Why is this? And how can I get the change event to first on programatic textarea change? Ideally I don't want to have to use JQuery.

推荐答案

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

You can bind the text area using v-model and then use a computed property to get/set the value. Check out the documentation here

<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
      }
    }
  }
}

这篇关于@change 不会触发以编程方式更改的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！