title: Infinite update loop
body: <p>I'm trying to build a reusable Image Loader component in Vue.js, which should:</p>
  
  <ol>
  <li>Manage its own thumbnail data</li>
  <li>Take <code>src</code> from parent as prop</li>
  <li>Display different thumbnails based on prop, using same instance without being destroyed</li>
  </ol>
  
  <p>So it may take data from two places (own thumbnail state || src prop), and I have a very difficult time wrapping my head around how to manage this. Not too sure if this is the right approach to the problem either.</p>
  
  <p>At this point I am getting an infinite update loop warning in the console.</p>
  
  <pre><code>[Vue warn]: You may have an infinite update loop in a component render function. 
  </code></pre>
  
  <p>Here is my code. Any help whatsoever would be greatly appreciated.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;label class="fileContainer"&gt;
        &lt;span class="icon is-large"&gt;
          &lt;i class="fa fa-camera"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;input type="file" :index="index" @change="updateThumbnail"/&gt;
      &lt;/label&gt;
  
      &lt;object
        :data="pdfURL"
        type="application/pdf"
        :class="{visible: pdfURL != ''}"&gt;
      &lt;/object&gt;
  
      &lt;img :src="getSrc()" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ["index", "srcProp"],
    data() {
      return {
        imageSrc: '',
        imageDataURI: '',
        pdfURL: '',
      }
    },
    methods: {
      getSrc() {
        if (typeof this.srcProp !== "undefined") {
          this.imageSrc = ''
          if (this.srcProp !== '') {
            this.imageSrc = this.srcProp
          } else {
            this.imageSrc = this.imageDataURI
          }
        } else {
          this.imageSrc = this.imageDataURI
        }
        return this.imageSrc
      },
      updateThumbnail(event) {
        this.$emit('change')
        const fileTypes = ['jpg', 'jpeg', 'png']
        const imgFile = event.target.files[0] || event.srcElement.files[0]
        const extension = imgFile.name.split('.').pop().toLowerCase()
        const isImg = fileTypes.indexOf(extension) &gt; -1
  
        if (extension === 'pdf') {
          const pdfURL = URL.createObjectURL(imgFile);
          this.pdfURL = pdfURL
          this.height = 200
          return
        } else if (isImg) {
          var reader = new FileReader();
          reader.readAsDataURL(imgFile);
          reader.onload = () =&gt; {
            this.imageDataURI = reader.result
            return
          }
        } else {
          alert("Please submit images or PDFs only.")
        }
      },
    }
  }
  &lt;/script&gt;
  </code></pre>