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.
