Question

即使组件不在当前视图中，我的数据也会遇到一些问题我有一个包含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>

Answer 1

奇怪的是，我在调用我的函数时通过触发自定义滚动事件来解决它：

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

仅在组件处于可见状态时加载数据？

1 个答案: