File input photo - code helper

xxxxxxxxxx
 
<template>
 <mdb-container>
   <mdb-row>
     <mdb-col md="4">
       <mdb-file-input 
                       @getValue="getFileInputValue" 
                       circle 
                       btnColor="mdb-color" 
                       btn-title="ADD PHOTO" 
                       rounded 
                       img
                       :src="src"/>
     </mdb-col>
   </mdb-row>
 </mdb-container>
</template>

xxxxxxxxxx
 
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
.hello {
  margin-top: 150px;
  text-align: center;
}
h3 {
  font-weight: normal;
  padding-top: 20px;
  padding-bottom: 30px;
}
p {
  color: #969696;
  margin-bottom: 0;
  font-size: 14px;
}
</style>

xxxxxxxxxx
 
<script>
  import { mdbCol, mdbFileInput, mdbContainer, mdbRow } from "mdbvue";
  export default {
    name: "FileInputPage",
    components: {
      mdbCol,
      mdbFileInput,
      mdbContainer,
      mdbRow
    },
    data() {
      return {
        test: 'Test value',
        src: 'https://mdbootstrap.com/img/Photos/Others/placeholder.jpg',
      };
    },
    methods: {
      getFileInputValue (val) {
        this.src='';
        setTimeout(()=>{
          this.src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg"
        }, 1000)  
      }
    }
  };
</script>
​

Console errors: 0