I am currently working with Vue.js using TypeScript and vue-class-component. My goal is to create a custom component with reactive data.
Below is the code I have so far:
<template>
<div>
<input v-model="data.name" placeholder="Name">
<input v-model="data.value" placeholder="Value">
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
interface Model {
name: string;
value: number;
}
@Component
export default class ClubVue extends Vue {
private data: Model;
public mounted() {
this.data = {...this.$store.getters.data};
}
}
</script>
In my initial version, an error occurred:
Property or method "data" is not defined on the instance but referenced during render
This is expected because undefined data will not be reactive as mentioned on the vue-class-component page. To solve this, I need to initialize data to null. However, I encountered a TypeScript error:
Property 'data' has no initializer and is not definitely assigned in the constructor
To address this, I attempted to set an initial value of null for data:
private data: Model = null;
Unfortunately, this resulted in another TypeScript error:
Type 'null' is not assignable to type 'Model'
I am hesitant to change the data type to Model | null as I know that data will never be null. Using the non-null assertion operator also didn't work since it made data undefined and therefore non-reactive.
Disabling TypeScript checks entirely is not an ideal solution as they serve a purpose in other parts of the codebase. Is there a proper way to correctly initialize data in this scenario?