title: Vue Warning on Console : You may have an infinite update loop in a component render function
body: <p>I'm a new student of Computer Science and I have a school project to do on Vue.js.
  It is working, but it shows the following Warning:</p>
  <p><strong>[Vue warn]: You may have an infinite update loop in a component render function.</strong></p>
  <p>English is not my first language, so I'm sorry if I write anything wrong in advance, but I'll try to explain what I have to do on the project.</p>
  <p>I have to create a Photo Grid/Album that shows no more than 3 photos on each line. Something like this:
  <a href="https://i.stack.imgur.com/xvXMD.png" rel="nofollow noreferrer">Example of how it has to look</a></p>
  <p>The code is like this:</p>
  <pre><code>  &lt;template&gt;
  &lt;v-container&gt;
    &lt;!-- 'v-container' est´substituindo ' div class=&quot;clubes-lista&quot; '--&gt;
    &lt;div class=&quot;grid-photo&quot;&gt;
      &lt;v-container class=&quot;grey lighten-3&quot;&gt;
        &lt;v-row
          v-for=&quot;index in numberLines()&quot;
          :key=&quot;index&quot;
          class=&quot;grey lighten-3&quot;
        &gt;
          &lt;v-col v-for=&quot;n in 3&quot; :key=&quot;n&quot; cols=&quot;4&quot;&gt;
            &lt;v-card v-if=&quot;numberPhotos &gt; checkInsertedAllPhotos()&quot; outlined&gt;
              &lt;v-img
                src=&quot;https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg&quot;
                alt=&quot;Bird Photo&quot;
              &gt;
              &lt;/v-img&gt;
              &lt;div class=&quot;photo-subtitle&quot;&gt;
                &lt;v-icon size=&quot;15&quot;&gt;mdi-heart-outline&lt;/v-icon&gt;
                &lt;p&gt;The Cockatiel&lt;/p&gt;
              &lt;/div&gt;
            &lt;/v-card&gt;
            &lt;v-card v-else&gt;&lt;/v-card&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
    &lt;/div&gt;
  &lt;/v-container&gt;
  </code></pre>
    
  <pre><code>&lt;script&gt;
  export default {
  name: &quot;PhotoGrid&quot;,
  
  data() {
    return {
      listPhotosOnGrid: [],
      numberPhotos: 0,
      numberTotalLines: 0,
      countPhotos: 0,
    };
  },
  
  computed: {},
  
  methods: {
    createPhotosList() {
      var listPhotos = [];
      for (var i = 0; i &lt; 10; i++) {
        var aux = {
          id: i + 1,
          src:
            &quot;https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg&quot;,
          subtitle: &quot;The cockatiel&quot;,
        };
  
        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;
    },
  },
  </code></pre>
  <p>};
  </p>
  <pre><code>&lt;style scoped&gt;
  .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;
  }
  </code></pre>
  
  <p>So... Trying to figure out what is happening, I think the Warning comes from the following line:</p>
  <pre><code>&lt;v-card v-if=&quot;numberPhotos &gt; checkInsertedAllPhotos()&quot; outlined&gt;
  </code></pre>
  <p>The <strong>if</strong> is because it can't show more images that what is given. For example, each line shows 3 photos, so if I don't have a total of photos that is multiple os 3, I don't want to fill all columns on the last line, only the necessary to show all the photos.</p>
  <p>But I just think, based on some tests, I'm not sure if the Warning comes from this line.</p>
  <p>The code works, but I feel something is not right. (<em><strong>It works partialy actually, because I still don't know how to get the info from the array to show, so it only loops the same thing</strong></em>)</p>
  <p>I want to learn how to make it right.</p>
  <p>So does anyone can tell me what I can do to make the Warning disappear or if I have to change everything, and make make a new logic for it to work properly.</p>
  <p>I just want to learn.</p>
  <p>Thank you so, so much and sorry again if this is a stupid question, or if I'm making everything wrong, hehe.
  And sorry if I wrote anything wrong.</p>
  <p>:)</p>