Categories
TypeScript Answers

How to use computed properties in Vue.js with TypeScript?

Spread the love

Sometimes, we want to use computed properties in Vue.js with TypeScript.

In this article, we’ll look at how to use computed properties in Vue.js with TypeScript.

How to use computed properties in Vue.js with TypeScript?

To use computed properties in Vue.js with TypeScript, we can add getters.

For instance, we write

<template>
  <div>
    <input type="text" name="Test Value" id="" v-model="text" />

    <label>{{ label }}</label>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({})
export default class About extends Vue {
  private text = "test";

  get label() {
    return this.text;
  }
}
</script>

to add the label getter that returns the value of the this.text reactive property.

Conclusion

To use computed properties in Vue.js with TypeScript, we can add getters.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.