Vue.js 是否仅在组件处于视图中时加载数据？

即使组件不在当前视图中，我在加载数据时也会遇到一些问题 我有一个包含500个元素的列表，这就是为什么每个组件只应该在滚动到元素列表时加载它的数据

• 我正在使用这个混音器：-

当安装组件时，我会有一个观察者来查看当前组件是否在视图中，但是，它似乎并不像我所希望的那样工作，或者可能我用错了

无论哪种方式，无论它调用什么，我的函数

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>


{{system.name}
系统压力

{{system.last_value}}
不适用
{{system.unit}
不适用
02.08/09:34上午
从“../../../../Api/Systems”导入SystemService；
从“../../../../Icons/AltenateLoader.vue”导入加载；
从“vue在视口中混合”导入inViewport；
导出默认值{
道具：['systemData'，'startDate'，'endDate'，'frequency']，
mixins:[inViewport]，
观察：{
“inViewport.now”：函数（可见）{
如果（可见）{
this.loadDataToSystem（）；//仅当用户滚动到组件时才会触发此操作-如果组件在当前视图中也是如此
this.elementIsVisible=true；
}否则{
this.elementIsVisible=false；
}
}
},
数据（）{
返回{
端点配置：{
开始：这个。开始日期，
结束：this.endDate，
频率：这个频率
},
系统：{
状态：“”，
挂起的事件：“”，
名称：this.systemData.name，
上次联机：''，
单位：''，
y_最大值：“”，
y\u最小值：“”，
最后一个值：“”
},
data:this.systemData，
加载：对，
elementIsVisible:false
}
},
组成部分：{
加载
},
方法：{
loadDataToSystem（）{
getSystem（this.data.id）。然后（response=>{
如果（response.status==200）{
日志（“加载数据”）；
}
}).catch（（错误）=>{
console.log（“Fejl:+错误”）；
});
}
},
创建（）{
}
}
奇怪的是，我在调用我的函数时触发了一个自定义滚动事件，从而解决了这个问题：

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

奇怪的是，我在调用函数时触发了一个自定义滚动事件，从而解决了这个问题：

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