Vue3 对象 - than 不是一个函数答案

【问题标题】：Vue3 Object - than is not a functionVue3 对象 - than 不是一个函数
【发布时间】：2022-02-03 18:02:18
【问题描述】：

我在 vue3 上的滑块有问题：

SlideShow

<template>
  <div class="slides-wrapper">
    <button
    class="btn btn-primary btn-action btn-lg slides-prev"
    @click="changePhoto(-1)"
    :disabled="prevBtn">
              <i class="icon icon-arrow-left"></i>
          </button>
          <div class="slides">
              <Slide
              :url="activeUrl"
              :text="infoSlides"/>
          </div>
          <button
          class="btn btn-primary btn-action btn-lg slides-next"
          @click="changePhoto(+1)"
          :disabled="nextBtn">
              <i class="icon icon-arrow-right"></i>
          </button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import Slide from './Slide.vue';
import { loader } from '@/helpers/loader';

export default {
  name: 'SlideShow',
  components: {
    Slide,
  },
  props: {
    images: {
      type: Array,
    },
  },

  setup(props) {
    const numberPhoto = ref(0);
    const lenghtTablePhotos = ref(+props.images.length - 1);
    const activeUrl = computed(() => props.images[numberPhoto.value].url);
    const nextBtn = computed(() => numberPhoto.value === lenghtTablePhotos.value);
    const prevBtn = computed(() => numberPhoto.value === 0);
    const infoSlides = computed(() => `${numberPhoto.value + 1}/${lenghtTablePhotos.value + 1}`);

    function changePhoto(param) {
      const index = numberPhoto.value + param;
      const slide = props.images[index];
      if (slide !== undefined) {
        loader(props.images[index].url)
          .than((url) => console.log(url))
          .catch(console.log('err'));
      }
    }

    return {
      numberPhoto,
      activeUrl,
      lenghtTablePhotos,
      changePhoto,
      nextBtn,
      prevBtn,
      infoSlides,
    };
  },
};
</script>

<style lang="scss" scoped>

.slides-wrapper {
        width: 500px;
        position: relative;
    }

    .slides-next,
    .slides-prev {
        position: absolute;
        top: 50%;

        transform: translateY(-50%);
    }

    .slides-prev {
        left: 0;
    }

    .slides-next {
        right: 0;
    }

</style>

还有我的js文件：

loader.js

export function loader(url) {
  const img = document.createElement('img');
  return new Promise((resolve, reject) => {
    // eslint-disable-next-line no-unused-vars
    img.onload = () => resolve(url);
    img.onerror = () => reject(url);
    img.src = url;
  });
}

但它不起作用，有人可以帮忙吗？

enter image description here

【问题讨论】：

您好，很高兴调查这个问题。 Javascript 对您的实现不满意，因此可以解释问题所在。你有一个错字。将 than 更改为 then。快乐编码快乐。

标签： object promise vuejs3

【解决方案1】：

您必须对变量使用响应式才能使用 Composition API，你可以访问

https://v3.vuejs.org/api/basic-reactivity.html#reactive

【讨论】：

【解决方案2】：

您在拨打.then function 时有错字。你写的是 than 而不是 then！

【讨论】：

【解决方案3】：

谢谢，但现在我还有一个问题。该函数似乎捕获错误。我使用了 async 和 await 但它不起作用。

setup(props) {
    const numberPhoto = ref(0);
    const lenghtTablePhotos = ref(+props.images.length - 1);
    const activeUrl = computed(() => props.images[numberPhoto.value].url);
    const nextBtn = computed(() => numberPhoto.value === lenghtTablePhotos.value);
    const prevBtn = computed(() => numberPhoto.value === 0);
    const infoSlides = computed(() => `${numberPhoto.value + 1}/${lenghtTablePhotos.value + 1}`);

    function changePhoto(param) {
      const index = numberPhoto.value + param;
      const slide = props.images[index];
      if (slide !== undefined) {
        loader(props.images[index].url)
          // eslint-disable-next-line no-unused-vars
          .then((url) => {
            numberPhoto.value = index;
          })
          .catch(console.log('error'));
      }
    }

我改变了我的功能，但仍然没有......

export default async function loader(url) {
  const img = document.createElement('img');
  const p = await new Promise((resolve, reject) => {
    // eslint-disable-next-line no-unused-vars
    img.onload = () => resolve(url);
    img.onerror = (e) => reject(console.log(e));
  });
  img.src = url;
  return p;
}

【讨论】：