Ключевое свойство или метод 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">