Ключевое свойство или метод v-for не определены в экземпляре, но на них ссылаются во время рендеринга

Question

Я получаю эту ошибку каждый раз, когда инициирую открытие новой вкладки 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>

Как мне заставить это предупреждение перестать появляться на :key="i"?

Vue.js v2.5.12 BootstrapVue 2.0.0-rc11

Answer 1

Вы никогда не определяли i, самый простой способ сделать это в самом цикле:

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

Таким образом, i будет текущим индексом для каждого элемента.

Однако атрибут key - это метод оптимизации механизма шаблонов, позволяющий определить, следует ли повторно визуализировать узел или нет. Если ваши заказы имеют уникальный идентификатор (как мне кажется), вы можете использовать его, чтобы фактически получить выгоду, используя key:

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