首页 文章

使用TypeScript的Vue没有组件

提问于
浏览 次
1

我在开发应用程序时遇到了问题 . 我使用Vue Vuetify和typescript，但我不想创建SPA应用程序或使用webpack与.vue组件一起工作，我需要创建几个页面，我每次创建新的Vue实例 . 但是当我创造例如

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");

},
});

我的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
}

使用typescript我不能使用this.totalItems，this.items和我不能在mount（）中调用this.getData（），但是当我在浏览器中调试我的代码时，我看到对象“this”具有所有这些属性和方法 .

我使用属性$ data [“property”] name和$ options.methods [“methodName”]来使用它，但我明白这是不正确的方法 . 我在Vue文档中读到了有助于创建接口或vue-class-component的ComponentOptions，但所有这些工具都使用了我想要避免的组件 .

在这种情况下我可以使用vue打字稿吗？我很感激我提问的提示

typescript vue.js vuejs2 vuetify.js

1 回答

  • 0

    我添加了一个接口来描述所有数据属性和方法 . 添加 this.getData(); / this.$options.methods["getData"].call(this); 并创建一个新的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);
    回复于

相关问题