Daten nur laden, wenn die Komponente sichtbar ist?

Question

Ich habe Probleme mit dem Laden meiner Daten, auch wenn die Komponente nicht in der aktuellen Ansicht ist. Ich habe eine Liste mit 500 Elementen, weshalb jede Komponente nur ihre Daten laden sollte, wenn sie zum Element scrollen. .

• im dieses mixin mit: -

https://github.com/BKWLD/vue-in-viewport-mixin wenn die Komponente montiert ist, dann habe ich einen Beobachter zu sehen, ob die Stromkomponente in der Ansicht ist, ist jedoch nicht ganz scheint um so zu arbeiten, wie ich es mir erhofft hatte, oder ich nutze es falsch.

Egal, wie es meine Funktion this.loadDataToSystem(); aufruft, auch wenn die Komponente nicht in der aktuellen Ansicht ist. Was ich will, ist nur die Funktion aufzurufen, wenn ich auf die Komponente gescrollt haben ...

Die Komponente sieht, ist dies: -

<template> 
    <div> 
    <template v-if="elementIsVisible"> 
     <div class="grid-tile__content" :class="{ 
     'is-alarm': system.pending_events === 'alarm', 
     'is-acknowledged-alarm': system.pending_events === 'alarm-acked', 
     'is-warning': system.pending_events === 'warning', 
     'is-info': system.pending_events === 'event', 
     'is-offline': system.status === 'Offline', 
     'is-online': system.status === 'Online'}"> 

     <h2 class="grid-tile__system-name"> 
      <span>{{system.name}}</span> 
     </h2> 

     <p class="grid-tile__unit-name">System Pressure</p> 

     <div class="grid-tile__content__loading" v-if="loading"> 
      <loading></loading> 
     </div> 

     <div v-else> 
      <div class="grid-tile__footer"> 
      <div class="grid-tile__chart-info"> 
       <span class="grid-tile__chart-number"> 
       <template v-if="system.last_value !== ''">{{system.last_value}}</template> 
       <template v-else>N/A</template> 
       </span> 
       <span class="grid-tile__chart-unit"> 
       <template v-if="system.unit.length > 0"> 
        {{system.unit}} 
       </template> 
       <template v-else> 
        N/A 
       </template> 
       </span> 
       <!--span class="grid-tile__chart-prev-number">3.34%</span--> 
      </div> 

      <div class="grid-tile__notification"> 
       <span class="grid-tile__notification-circle"></span> 
       <span>02.aug/09:34am</span> 
      </div> 
      </div> 
     </div> 

     </div> 
    </template> 
    </div> 
</template> 

<script> 
    import SystemService from '../../../../Api/Systems'; 
    import Loading from '../../../../Icons/AltenateLoader.vue'; 
    import inViewport from 'vue-in-viewport-mixin'; 

    export default { 
    props: ['systemData', 'startDate', 'endDate', 'frequency'], 
    mixins: [ inViewport ], 
    watch: { 
     'inViewport.now': function(visible) { 
     if(visible) { 
      this.loadDataToSystem(); //This should only be triggered if the user has scrolled to the component- So if the component is in the current view 
      this.elementIsVisible = true; 
     } else { 
      this.elementIsVisible = false; 
     } 
     } 
    }, 
    data() { 
     return { 
     endpointConf: { 
      start: this.startDate, 
      end: this.endDate, 
      frequency: this.frequency 
     }, 
     system: { 
      status: '', 
      pending_events: '', 
      name: this.systemData.name, 
      last_online: '', 
      unit:'', 
      y_max_value: '', 
      y_min_value: '', 
      last_value: '' 
     }, 
     data: this.systemData, 
     loading: true, 
     elementIsVisible: false 
     } 
    }, 
    components: { 
     Loading 
    }, 
    methods: { 
     loadDataToSystem() { 
     SystemService.getSystem(this.data.id).then(response => { 
      if(response.status === 200) { 
      console.log("load data"); 
      } 
     }).catch((error) => { 
      console.log("Fejl:" + error); 
     }); 
     } 
    }, 
    created() { 

    } 
    } 

</script> 

Answer 1

Merkwürdigerweise löste ich es durch eine benutzerdefinierte Scroll-Ereignis feuern Beim Aufruf meiner Funktion:

loadDataToSystem() { 
    window.dispatchEvent(new Event('scroll')); 
    ......... 
}