There is a significant amount of documentation on how to utilize Vue.js with JavaScript, but very little information on using TypeScript. The question arises: how do you create computed properties in a vue component when working with TypeScript?
According to the official example, computed should be an object containing functions that will be cached based on their dependent properties.
Take a look at this example I created:
import Vue from 'vue';
import { Component } from "vue-property-decorator";
@Component({})
export default class ComputedDemo extends Vue {
private firstName: string = 'John';
private lastName: string = 'Doe';
private computed: object = {
fullName(): string {
return `${this.firstName} ${this.lastName}`;
},
}
}
Here's the accompanying HTML:
<div>
<h1>Computed props ts demo</h1>
<ul>
<li>First name: {{firstName}}</li>
<li>Last name: {{lastName}}</li>
<li>Together: {{fullName}}</li>
</ul>
</div>
The third list item doesn't display anything. Can someone provide guidance on how to properly define computed in this scenario?