Vue 3 + Typescript - How to watch a class property

user_2449584 0
Viewed 1888

I have recently started a project using CLI of Vue3 with Typescript and noticed that the 'vue-class-component' is rather different. In fact, I am not sure if this project is really compatible with the latest Vue 3 functionality.

I came across these two threads: https://github.com/vuejs/vue-class-component/issues/406 and https://github.com/vuejs/vue-class-component/issues/406#issuecomment-745490016 so I am not sure if 'vue-class-component' is the way to go these days.

Currently, I am trying to figure out how to Watch a property pass to a component but none of the stuff such as @Watch or @Prop are available anymore.

Can somebody provide an example on how to go about this?

Here is a snippet and I would like to know how to watch the msg property value:

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    msg: String,
  },
})
export default class HelloWorld extends Vue {
  msg!: string;

}
</script>

Much obliged

vuejs3 typescript watch
2 Answers

For Vue 2 you would use vue-property-decorator

For Vue 3 - for now - you can use vue-facing-decorator which has a complete implementation of decorators.

Both repositories have similar usage:

// import { Prop, Watch, Component, Vue } from " vue-property-decorator"; // Vue2
import { Prop, Watch, Component, Vue } from "vue-facing-decorator"; // Vue3

@Component
export default class HelloWorld extends Vue {
  @Prop
    msg: string
  
  @Watch('msg')
  public (newMsg: string, oldMsg: string) {
    console.log(`msg just changed from ${oldMsg} to ${newMsg}`);
  }
}
user_19348030

We use the vue-property-decorator package, and it works quite nicely.

https://github.com/kaorun343/vue-property-decorator#Watch

Edit: I just saw that you are using Vue 3 and I am note quite sure, if it is supported. I will still not delete this answer, because it might help you or someone else.

Cheers

user_10070030
Related