只有在組件可見時才加載數據？

即使組件不在當前視圖中，我的數據也會出現一些問題我有一個包含500個元素的列表，這就是爲什麼每個組件只有在滾動到列表時才加載數據的原因。。使用只有在組件可見時才加載數據？

林這樣的mixin： -

https://github.com/BKWLD/vue-in-viewport-mixin 當組件被安裝，那麼我有一個守望者，看看是否電流分量在視圖中，但是，不會顯得相當像我希望的那樣工作，或者我可能會錯誤地使用它。

無論哪種方式，即使組件不在當前視圖中，也不管它叫做我的功能this.loadDataToSystem();。我要的是隻打電話的時候，我已經滾動到組件的功能...

組件看起來是這樣的： -

<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>

來源

2017-08-09 hauge

奇怪的是，我解決它發射了自定義滾動事件當撥打我的功能時：

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

來源

2017-08-09 20:59:31 hauge

只有在組件可見時才加載數據？

回答

相關問題