[Vuejs]-Vue with TypeScript without components

0👍

I’ve added an Interface to describe all data attributes and methods.
Add this.getData();/this.$options.methods["getData"].call(this); and created an new vue instance.

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);
👤Philip

Leave a comment