[Vuejs]-Document.getElementById retuning is not updating dynamically in vue.js returning null every time

by

0👍

computed would not watch for document methods, because it is not wrapped with vue’s setters and getters.

What you can do is mark your div with ref and then access it via this.$refs

<div class="printIconSection"   v-for="(report, index) in reports" :key="report.property" >
          <div class="Icon" :ref="'printReport_AId' + index" v-if="isOverview">
             <font-awesome-icon :icon="report.icon" @click="printWindow()"/>
   </div>
</div>

methods(){
    noprint(index) {
        const printicon = this.$refs['printReport_AId' + index];
        if (printicon != null) {
          return true;
        }
        return false;
    },
}

When you need to achieve noprint you just call noprint(index)
For each element of array noprint would be different

0👍

From your code, it seems that you’re inserting the ID in each iteration of the v-for loop. This means that the ID will not be unique in the event that there is more than one entry in your reports array. Based on your code, this is what I understand that you want to achieve:

  • each report will contain an isOverview property. It is probably a boolean, so it has a value of true or false
  • when isOverview is true, the print icon will be shown
  • when isOverview is false, the print icon will not be shown
  • based on whether the print icon(s) are shown, you want to toggle the .logo class

This comes the tricky part, as you have multiple isOverview to evaluate. Do you want to toggle the .logo element when:

  • all reports has isOverview property set to true, or
  • one or more reports has isOverview property set to true?

If you want to show the .logo element when all reports has isOverview set to true, then you can do this:

computed() {
    noprint() {
        return this.reports.every(report => report.isOverview);
    }
}

Otherwise, if you only want one or more report to have isOverview as true, you can do this instead:

computed() {
    noprint() {
        return this.reports.some(report => report.isOverview);
    }
}

Leave a comment