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键属性或方法未在实例上定义，但在渲染期间被引用

1 个答案: