Lazy loading - code helper

xxxxxxxxxx
 
<template>
  <MDBContainer
    class="mt-5"
    style="height: 500px; overflow-y: scroll"
    id="lazy-container-1"
  >
    <MDBRow class="text-center" style="height: 800px">
      <p>Scroll down to see an image</p>
      <MDBBtn @click="handleClick" color="primary">Change lazySrc</MDBBtn>
      <p><i class="far fa-arrow-alt-circle-down fa-3x my-4"></i></p>
      <img
        v-if="shouldRender"
        v-mdb-lazy="directiveData"
        alt="Example image"
        class="img-fluid lazy my-3"
        style="margin-top: 50% !important"
      />
       <img
        v-if="shouldRender"
        v-mdb-lazy="directiveData"
        alt="Example image"
        class="img-fluid lazy my-3"
        style="margin-top: 50% !important"
      />
    </MDBRow>
  </MDBContainer>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
</style>

xxxxxxxxxx
 
<script>
  import { mdbLazy, MDBContainer, MDBRow, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref, computed } from "vue"
​
  export default {
    directives: {
      mdbLazy
    },
    components: {
      MDBContainer,
      MDBRow,
      MDBBtn
    },
    setup() {
        const srcData = ref('https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp')
        const shouldRender = ref(true);
      
        const directiveData = computed(() => { return {
          src: srcData.value,
          placeholder: 'https://place-hold.it/1321x583?text=Loading',
          parent: '#lazy-container-1'
        }});
    
        const handleClick = () => {
          shouldRender.value = false;
          srcData.value = 'https://mdbootstrap.com/img/Photos/Slides/img%20(103).webp'
        
          setTimeout(()=>{
            shouldRender.value = true;
          },10)
        }
        
        
        
      
      return {
        handleClick, directiveData, shouldRender
      }
    }
  };
</script>

Console errors: 0