Vue3 Object - than is not a function

Question

I have a problem with my slider on 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>

and my js file:

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;
  });
}

but it doesnt work, can someone help ?

enter image description here

Answer 1

you have to use reactive on your variable to use Composition API, u can access

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

Answer 2

you have a typo at calling the .then function. You wrote than instead of then!