属性未在实例上定义，但在渲染期间引用答案

【问题标题】：Property not defined on the instance but references during render属性未在实例上定义，但在渲染期间引用
【发布时间】：2018-12-24 05:37:20
【问题描述】：

我正在使用 VueJS 2.5.16，以 sfc 方式与 TypeScript 和 vue-class-component

我的 BookingTable.Vue：

<template>
    <div>
        <button class="refresh-button" v-on:click="refresh()"><img src="../assets/Data-Synchronize.png"></button>
        <table>
            <tr v-bind:key="booking.id" v-for="booking in bookings">
               [...]
            </tr>
        </table>
    </div>
</template>

<script lang="ts">
     class Booking {
         Id : number = 0;
         StartTime : string = '';
         EndTime : string = '';
         EnergyConsumed : number = 0;
         User : number = 0;
         Parking : number = 0;
         Plug : number = 0;
         Charging : boolean = false;
         Cancellation : string = '';
     }

    export default class BookingTable extends Vue {
         bookings : any;

       [Other properties and methods]

</script>

这是 VueJS 抛出的警告：

[Vue warn]: Property or method "bookings" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我已经搜索了堆栈溢出和 github 问题部分，但我无法理解我的错误在哪里。因此，如果有人可以向我解释，我将非常感激:)

谢谢

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

data 是模板范围内绑定的内容。看起来您在任何地方都没有定义data。您甚至可以在Microsoft Vue TypeScript example 中看到这一点。

使用这个：

export default class BookingTable extends Vue {
    data(): {
        return {
            bookings: [];
        }
    }
}

另外，您似乎也可以使用装饰器在上面的同一存储库中按照此示例声明属性：HelloDecorator.vue

【讨论】：

非常感谢！我自愿使用“类”方式，使用装饰器解决了我的问题！