CODEWITHSUNDEEP
vue.jsvuejs2
Starchand
Starchand

Reputation: 714

@change not firing on programmatically changed values

I have the below textarea with a change event.

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

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";

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

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.

Upvotes: 1

Views: 2096

Answers (1)

Tim Hutchison
Tim Hutchison

Reputation: 3633

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

#HTML

<textarea v-model="text">

#Typescript

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

Upvotes: 3

Related Questions