@Watch & $Refs 与 typescript 和 vue-property-decorators答案

【问题标题】：@Watch & $Refs with typescript and vue-property-decorator@Watch & $Refs 与 typescript 和 vue-property-decorators
【发布时间】：2020-08-28 12:54:03
【问题描述】：

我有一个关于手表和参考的问题。我有一个带有 v-model 的 vswitch。 v-model 的 setter 操作需要很长时间（写入存储并触发 DOM 上的大量更新）。

不幸的是，Vue 在渲染开关的新值之前执行了操作。我想立即显示输入值。我的解决方法是“观察”开关 inputValue 并在 inputValue 更改时执行 setter 操作。如何使用 typescript 和 vue-property-decorators 做到这一点？我在我的开关上放了一个 ref 并尝试了这样的事情：

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

@watch 装饰器甚至可以做到这一点吗？

谢谢你和最好的问候

【问题讨论】：

标签： typescript vue.js vuetify.js watch

【解决方案1】：

您不能使用@Watch 来观看 $refs，因为$refs aren't reactive 的属性。你最好使用事件。您可能正在使用Vuetify's v-switch。您可以使用它的 change-event 并收听它：

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

...

valueChanged() {
  // handle change event
}

【讨论】：

感谢您的回复。不幸的是，这行不通（当然，这是我尝试的第一件事......），因为在 DOM 上的 switch 更改之前调用了 change 事件。我也尝试使用 Vue.nextTick 但这也不起作用。在我看来，vue 没有解决方案。我最终使用了漂亮的 vuetify 开关加载微调器。