Vuejs无限循环

Question

这是我的代码，vue 警告： menu.js:39016 [Vue 警告]：您可能在组件渲染函数中有无限更新循环。 我不知道为什么，请帮助我。我在循环中使用 v-for 时有这个

<template>
    <div>
        <table class="table">
            <thead class="thead-dark">
                <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Image</th>
                <th scope="col">Category</th>
                <th scope="col">Additional Information</th>
                <th scope="col">Created By</th>
                <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="menu in menuData" :key="menu.id">
                <th scope="row">{{ stt++ }}</th>
                <td>{{ menu.name }}</td>
                <td>{{ menu.image_url }}</td>
                <td><ul v-for="category in menu.categories" :key="category.id"><li>{{ category.name }}</li></ul></td>
                <td>{{ menu.additional_information }}</td>
                <td>{{ menu.menu_user.name }}</td>
                <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    </template>
    
    <script>
        export default {
            mounted() {
                console.log('Component mounted.')
            },
            data: function() {
                return {
                    stt: 0,
                    menuData: [],
                }
            },
            created: function() {
                axios.get('/api/menus').then((response) => {
                    this.menuData = response.data.data.data;
                    console.log(this.menuData);
                });
            }
        }
    </script>

Answer 1

这是因为您直接在template 中更改数据导致重新渲染。

<th scope="row">{{ stt++ }}</th>

不要改变模板中的数据。

正如@rjcarl 提到的，您可以在v-for 中获取行索引

<tr v-for="(menu, index) in menuData" :key="menu.id">
<th scope="row">{{ index }}</th>