Vue.js v-for键属性或方法未在实例上定义，但在渲染期间引用

每次触发打开新的

BoostrapVue

选项卡时都会出现此错误：

Property or method "i" 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.

这是我的组件：

<template>
    <div>
        <b-card no-body>
            <b-tabs card>
                <b-tab v-for="order in tabs" :key="i">
                    <template slot="title">
                        <div>{{ order.name }}</div>
                        <b-button type="button" class="close float-right" aria-label="Close" @click="closeTab(order.id)">
                            <span aria-hidden="true">&times;</span>
                        </b-button>
                    </template>
                    <items-table
                            ref="itemsTable"
                            name="items-table"
                    ></items-table>
                </b-tab>
            </b-tabs>
        </b-card>
    </div>
</template>

<script>
    export default {
        name: 'table-tabs',
        data() {
            return {
                tabs: [],
            }
        },
        methods: {
            closeTab(id) {
                for (let i = 0; i < this.tabs.length; i++) {
                    if (this.tabs[i].id === id) {
                        this.tabs.splice(i, 1);
                    }
                }
            },
            newTab(order) {
                this.tabs.push(order);
            }
        }
    }
</script>

{{order.name}
&时代；
导出默认值{
名称：“表选项卡”，
数据（）{
返回{
选项卡：[]，
}
},
方法：{
关闭选项卡（id）{
for（设i=0；i

如何使此警告停止显示在

：key=“I”

Vue.js v2.5.12

---

BootstrapVue 2.0.0-rc11

您从未定义过

i

，最简单的方法是在循环本身中：

<b-tab v-for="(order, i) in tabs" :key="i">

---

您从未定义过

i

，最简单的方法是在循环本身中：

<b-tab v-for="(order, i) in tabs" :key="i">