我是计算机科学的新生，我有一个关于Vue.js的学校项目要做。它正在工作，但显示以下警告：
[Vue warn]：组件渲染函数中可能存在无限更新循环
英语不是我的第一语言，所以如果我提前写错了什么，我很抱歉，但我会尽力解释我在这个项目上要做什么。
我必须创建一个照片网格/相册，每行显示的照片不超过3张。类似于以下内容：外观示例
代码如下：
<template>
<v-container>
<!-- 'v-container' est´substituindo ' div class="clubes-lista" '-->
<div class="grid-photo">
<v-container class="grey lighten-3">
<v-row
v-for="index in numberLines()"
:key="index"
class="grey lighten-3"
>
<v-col v-for="n in 3" :key="n" cols="4">
<v-card v-if="numberPhotos > checkInsertedAllPhotos()" outlined>
<v-img
src="https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg"
alt="Bird Photo"
>
</v-img>
<div class="photo-subtitle">
<v-icon size="15">mdi-heart-outline</v-icon>
<p>The Cockatiel</p>
</div>
</v-card>
<v-card v-else></v-card>
</v-col>
</v-row>
</v-container>
</div>
</v-container>
<script>
export default {
name: "PhotoGrid",
data() {
return {
listPhotosOnGrid: [],
numberPhotos: 0,
numberTotalLines: 0,
countPhotos: 0,
};
},
computed: {},
methods: {
createPhotosList() {
var listPhotos = [];
for (var i = 0; i < 10; i++) {
var aux = {
id: i + 1,
src:
"https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg",
subtitle: "The cockatiel",
};
listPhotos.push(aux);
}
this.listPhotosOnGrid = listPhotos;
this.numberPhotos = listPhotos.length;
},
numberLines() {
this.createPhotosList();
var photosMultipleThree = this.numberPhotos;
while (photosMultipleThree % 3 != 0) {
photosMultipleThree = photosMultipleThree + 1;
}
this.numberTotalLines = photosMultipleThree / 3;
return photosMultipleThree / 3;
},
checkInsertedAllPhotos() {
var cont = this.countPhotos++;
return cont;
},
},
}；
<style scoped>
.photo-subtitle {
font-size: 10px;
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-start;
padding: 0;
margin-top: 10px;
}
.photo-subtitle p {
margin-left: 5px;
}
所以。。。试图弄清楚发生了什么，我认为警告来自以下几行：
<v-card v-if="numberPhotos > checkInsertedAllPhotos()" outlined>
if是因为它无法显示比给定图像更多的图像。例如，每行显示3张照片，所以如果我的照片总数不是多个os3，我不想填充最后一行的所有列，只需要显示所有照片。
但我只是认为，根据一些测试，我不确定警告是否来自这条线。
代码是有效的，但我觉得有些地方不对。(它实际上是部分工作的，因为我仍然不知道如何从数组中获得信息来显示，所以它只循环相同的东西(
我想学习如何改正。
任何人都可以告诉我我可以做些什么来让警告消失，或者我是否必须改变一切，并制定一个新的逻辑使其正常工作。
我只想学习。
非常感谢你，如果这是一个愚蠢的问题，或者如果我把一切都做错了，再次道歉，呵呵。如果我写错了什么，我很抱歉。
：(
我已经查看了您的代码。首先，我建议您停止使用var关键字，而是使用let或const(您可以在此处检查问题，并查看基于这些关键字的范围，var范围现在非常不寻常，它会导致一些问题(。
关于无限更新循环的特殊问题，问题来自checkInsertedAllPhotos函数。我会这样解释：
-
在v-if-Vue中，内部机制通过触发函数
checkInsertedAllPhotos来检查元素是否应该被渲染 -
当执行函数
checkInsertedAllPhotos时，数据countPhotos会增加(顺便说一句，最好只执行this.countPhotos ++; return this.countPhotos; -
由于数据已被修改，Vue正在触发页面的重新呈现
-
由于存在重新渲染，Vue在v-if中检查元素是否应该通过触发函数
checkInsertedAllPhotos来渲染。
如果Vue不阻止它，它可能是无限的！
我建议重新调整一下你的逻辑。然而，解决问题的一个快速方法是，当您检查列表中的索引时：例如，如果您想显示listPhotosOnGrid[i]，请检查i<numberPhotos是否带有v-if，并且在v-else中，如果您愿意，可以显示其他内容。
我还认为，通过利用css(例如css网格(，您可以获得更简单的代码。你可以有这样简单的东西：
<div v-for="n in 100">
<img v-bind:src="`https://i.pinimg.com/photos/${n}.png`">
</div>
以及一些css来对其进行样式设置，并且每行只有3个项目。如果你想了解css网格，我推荐Mozzilla文档或以下教程。
现在我有点难以理解确切的问题，因为里面有多个主题需要解决，但我希望我对无限循环的解释能帮助你！
学习Vue时玩得开心！
感谢所有帮助我的人，你们确实帮助了我！！！！
对不起，我今天只能睡一会儿。我认为我能够在代码上做得更好，我改变了很多，特别是代码上的逻辑。我认为它可以变得更好，但可以肯定的是，我已经取得了很大的进步，呵呵。
我有点不愿意发布这个问题，因为即使在我发布这个问题的时候，我也不知道该怎么办，但我有点觉得这是一个愚蠢的问题(比如一个无聊的问题(，我只会慢慢来。但我只得到了惊人的答案，每个人都很耐心，所以非常感谢！！
(我也是StackOverflow的新手，所以我希望我能把一切都做好，呵呵(