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">

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

v-for key property or method is not defined on the instance but referenced during render

vue.js

bootstrap-vue

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

v-for key property or method is not defined on the instance but referenced during render

vue.js

bootstrap-vue

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