[英]Vue with TypeScript without components
I encountered with problem when develop application. 开发应用程序时遇到问题。 I use Vue + Vuetify with typescript, but I don't want to create SPA application or use webpack for work with .vue components, I need to create several page, where I create each times new Vue instance.
我将Vue + Vuetify与Typescript一起使用,但是我不想创建SPA应用程序或将Webpack用于.vue组件,因此我需要创建多个页面,每次都在其中创建新的Vue实例。 But when I create for example
但是当我创建例如
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");
},
});
My tsconfig.json 我的tsconfig.json
{
"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
}
With typescript I can't use this.totalItems, this.items and I can't call this.getData() in mounted(), but when I debug in browser my code, I see that object "this" has all these properties and methods. 使用打字稿,我不能使用this.totalItems,this.items,也不能在mount()中调用this.getData(),但是当我在浏览器中调试代码时,我看到对象“ this”具有所有这些属性和方法。
I use property $data["property"] name and $options.methods["methodName"] in order to work with it, but I understand that isn't correct approach. 我使用属性$ data [“ property”] name和$ options.methods [“ methodName”]来使用它,但是我知道这是不正确的方法。 I read in Vue documentation about ComponentOptions which help to create interface or vue-class-component, but all these tools use components, which I want to avoid.
我在Vue文档中阅读了有关ComponentOptions的信息,这些元素有助于创建接口或vue-class-component,但是所有这些工具都使用了组件,我想避免这些组件。
Can I use vue + typescript in this case? 在这种情况下可以使用vue +打字稿吗? I'd appreciate tips to my question
我很乐意回答我的问题的技巧
I've added an Interface to describe all data attributes and methods. 我添加了一个接口来描述所有数据属性和方法。 Add
this.getData();
添加
this.getData();
/ this.$options.methods["getData"].call(this);
/
this.$options.methods["getData"].call(this);
and created an new vue instance. 并创建了一个新的vue实例。
import * as Vue from 'Vue';
import axios from 'axios';
interface AppInterface extends Vue {
drawer: boolean,
mini: boolean,
totalItems: number,
items: any,
headers: any,
getData (): void
}
var App = {
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() {
// or this.$options.methods["getData"].call(this);
this.getData();
}
} as Vue.ComponentOptions<AppInterface>
// new vue instance
new Vue(App);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.