[Vuejs]-How to mount a vue js child component only when the parent is fully mounted – I'am using $refs

by

0👍

✅

Because

  • The child component is mounted before parent.
  • $refs is not reactivity,you should avoid accessing $refs from within templates or computed properties.

Solution 1:

    <div ref="content">
     <!-- Content to Extrat into PDF -->
    </div>
    <export-pdf  name="Liste des consommables des équipements" :area="refElement" />

<script>
export default {
    data(){
        return {
          refElement: {},
        }
     }, 
    mounted(){
        this.refElement = this.$refs.content
    }
}
</script>

Solution 2:

parent:

 <div ref="content">
 <!-- Content to Extrat into PDF -->
 </div>
 <export-pdf  name="Liste des consommables des équipements" areaRefName="content" />

children:

props:{
    areaRefName: String,
    name : String,
    orientation : {
      type: String,
      default(){
        return 'landscape'
      }
    }
},
methods:{
     exportToPDF () {
          let element = this.$parent.$refs[this.areaRefName]
          html2pdf(element , {
            margin: [1.5, 1],
            filename: this.name + '.pdf',
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: {scale: 2},
            jsPDF: { unit: 'cm', format: 'a4', orientation: this.orientation ,  floatPrecision: 16 }
        })
    }
}

Leave a comment