تایپاسکریپت - چگونه از شنونده رویداد اسکرول در Vue Nuxt TS برای یک دیو خاص استفاده کنیم

میدانم که این با nuxt js بسیار ممکن است. اما چگونه میتوانیم این را با nuxt و ugly ts انجام دهیم؟ این کد را به اصطلاحات زبان اسکریپت ts تبدیل کنید اگر کسی بتواند این کار را انجام دهد. این غیرممکن است زیرا برای nuxt تقریباً هیچ محتوایی درباره گوش دادن به رویداد اسکرول روی یک div خاص وجود ندارد. نمونه: https://codepen.io/ash_0001/pen/NWMYaOw

    new Vue({
  el: '#app',
  data: {
    loading: false,
    nextItem: 1,
    items: []
  },
  mounted () {

    
    const listElm = document.querySelector('#infinite-list');
    listElm.addEventListener('scroll', e => {
      if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
        this.loadMore();
      }
    });

 
    this.loadMore();

  },
  methods: {
    loadMore () {
      
      
      this.loading = true;
      setTimeout(e => {
        for (var i = 0; i < 20; i++) {
          this.items.push('Item ' + this.nextItem++);
        }
        this.loading = false;
      }, 200);
   
      
    }
  }
});

این فایل package.json من است

{
  "name": "web_portal",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style"
  },
  "dependencies": {
    "@bachdgvn/vue-otp-input": "^1.0.8",
    "@morioh/v-msg": "^1.0.4",
    "@nuxt/content": "^1.9.0",
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/auth-next": "5.0.0-1608568767.2fe2217",
    "@nuxtjs/axios": "^5.12.4",
    "@nuxtjs/pwa": "^3.0.2",
    "@stripe/stripe-js": "^1.14.0",
    "@vue-stripe/vue-stripe": "^4.1.8",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6",
    "nuxt-property-decorator": "^2.8.8",
    "nuxt-socket-io": "^2.0.3"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-config-typescript": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "babel-eslint": "^10.1.0",
    "cypress": "7.1.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.1.2",
    "stylelint": "^13.7.2",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0",
    "video.js": "^7.11.8"
  }
}

پاسخ شماره ۱

اگر به دنبال یک پیادهسازی پیمایش بینهایت آسان برای استفاده هستید، توصیه میکنم بسته vue-observe-visibility را امتحان کنید.
در غیر این صورت، البته میتوانید آن را با استفاده از یک پیادهسازی ساده با استفاده از API مشاهده تداخل (Intersection Observer) که در اینجا نشان داده شده است، پیادهسازی کنید.

بقیه سوالات شما در نظرات بالا پاسخ داده شدهاند.