Recently, I've been facing a challenge while developing an application. I'm using Vue + Vuetify with typescript, but I'm trying to steer clear of creating a single-page application or using webpack to handle .vue components. My goal is to create multiple pages where I initialize a new Vue instance each time. However, I encountered an issue when I tried to create a new instance with the following code:
import * as Vue from 'Vue';
import axios from 'axios';
<any>window.vue = new Vue({
el: "#app",
data: {
drawer: true,
mini: false,
totalItems: 0,
items: [],
headers: [,
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
],
},
methods: {
getData() {
axios.get("http://exmaple1234.com/api/list")
.then((response) => {
this.$data["totalItems"] = 1;
this.$data["items"] = [
{
value: false,
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
}
];
})
}
},
mounted() {
this.$options.methods["getData"].call("getData");
},
});
In my tsconfig.json file
{
"compilerOptions": {
"alwaysStrict": true,
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": false,
"target": "es5",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"lib": [ "es2017", "dom", "dom.iterable" ]
},
"exclude": [
"node_modules"
],
"compileOnSave": true
}
Struggling with the limitations of typescript, I found that I couldn't access this.totalItems, this.items, or call this.getData() in mounted(). However, upon debugging in the browser, I noticed that the "this" object did indeed contain these properties and methods.
I resorted to using $data["property"] and $options.methods["methodName"] to interact with the data, but I'm aware that this may not be the correct approach. After reading Vue documentation on ComponentOptions, which offer solutions like creating interfaces or using vue-class-components, I realized that these methods still rely on components, which I am trying to avoid.
Is there a way to effectively use vue + typescript in my specific scenario? Any tips or advice would be greatly appreciated.