Vuejs无限循环

Question

这里是我的代码和vue警告：menu.js:39016[Vue warn]：组件渲染函数中可能有一个无限更新循环。我不知道为什么，请帮帮我。当我使用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>