CODEWITHSUNDEEP
typescriptvue.jsvuetify.jswatch
finnk
finnk

Reputation: 133

@Watch & $Refs with typescript and vue-property-decorator

I have a question regarding watch and ref. I have a vswitch with a v-model. The setter action of the v-model takes a long long time(writes to the store and triggers a lot of updates on the DOM).

Unfortunately Vue executes the action before it renders the new value of the switch. I want to display the input value immediately. My workaround-idea was to "watch" the switch inputValue and execute the setter action when the inputValue is changED. How can I do this with typescript and vue-property-decorator? I put a ref on my switch and tried something like this :

  @Watch("$refs.switch.inputValue", {
    immediate: true,
    deep: true,
  })
  change() {
    alert('value changed');
  }

Is this even possible with the @watch decorator?

Upvotes: 0

Views: 1962

Answers (1)

Neman
Neman

Reputation: 1307

You can't use @Watch to watch $refs, because properties of $refs aren't reactive. You'd better use events. You are probably using Vuetify's v-switch. You could use its change-event and listen to it:

<v-switch @change="valueChanged()"/>

...

valueChanged() {
  // handle change event
}

Upvotes: 1

Related Questions