vue-class-component使用问题

<script lang="ts">
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';

import { useScript } from '/@/hooks/web/useScript';

const BAI_DU_MAP_URL = 'https://api.map.baidu.com/getscript?v=3.0&ak=xxx';
export default defineComponent({
  setup() {
    const wrapRef = ref<HTMLDivElement | null>(null);
    const { toPromise } = useScript({ src: BAI_DU_MAP_URL });

    async function initMap() {
      await toPromise();
      await nextTick();
      const wrapEl = unref(this.wrapRef);
      if (!wrapEl) return;
      const BMap = (window as any).BMap;
      const map = new BMap.Map(wrapEl);
      const point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true);
    }

    onMounted(() => {
      initMap();
    });

    return { wrapRef };
  },
})
</script>

vue-class-component写法

<script lang="ts">
import { ref, nextTick, unref } from 'vue'
import {Vue} from 'vue-property-decorator'
import { useScript } from '/@/hooks/web/useScript'

const BAI_DU_MAP_URL = 'https://api.map.baidu.com/getscript?v=3.0&ak=xxx';

export default class LogisticsDetail extends Vue {
  private wrapRef = ref<HTMLDivElement | null>(null)
  private toPromise = useScript({ src: BAI_DU_MAP_URL })

  async initMap() {
    await this.toPromise();
    await nextTick();
    const wrapEl = unref(this.wrapRef);
    if (!wrapEl) return;
    const BMap = (window as any).BMap;
    const map = new BMap.Map(wrapEl);
    const point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
  }

  mounted() {
    this.initMap()
  }

}
</script>

错误提示: Uncaught (in promise) TypeError: this.toPromise is not a function,这个要怎么改?


已解决segmentfault.com/q/101000004045280...

讨论数量: 2

这个 toPromise 看起来确实不像个函数,可以打印出来结合文档看看到底是啥。

2年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!