Recently, I made the transition from plain JavaScript to Typescript (or at least I'm attempting to). Below is code that was functioning perfectly prior to this change, with the exception of the typings added so far:
<script lang="ts">
import axios from 'axios';
export default {
name: "Index",
data() {
return {
years: Array,
bgs: Array
}
},
methods: {
loadYears: function (): void {
let self = this;
axios.get('../letter/get/years').then(function (response) {
function pushYears(value: any) {
self.years.push(value);
}
response.data['years'].forEach(pushYears);
});
},
loadBg: function (): void {
let self = this;
axios.get('../bg/get/all').then(function (response) {
JSON.parse(response.data['bgs']).forEach(function (obj: any) {
self.bgs.push(obj);
})
});
}
},
beforeMount() {
this.loadYears();
this.loadBg();
}
}
</script>
Following my switch to Typescript, I encountered issues where self.years.push(value) and self.bgs.push(obj) are no longer functional. The error message states: "self.$data.years.push is not a function". Curiously, within the beforeMount()-function, an error occurs indicating that loadYears() and loadBg are undefined, yet accessing the data()-objects functions seamlessly in this block through this.data().years or bgs. How can I access these properties within my methods-block?