title: Vue3 Object - than is not a function
body: <p>I have a problem with my slider on vue3:</p>
  <p><code>SlideShow</code></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;slides-wrapper&quot;&gt;
      &lt;button
      class=&quot;btn btn-primary btn-action btn-lg slides-prev&quot;
      @click=&quot;changePhoto(-1)&quot;
      :disabled=&quot;prevBtn&quot;&gt;
                &lt;i class=&quot;icon icon-arrow-left&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
            &lt;div class=&quot;slides&quot;&gt;
                &lt;Slide
                :url=&quot;activeUrl&quot;
                :text=&quot;infoSlides&quot;/&gt;
            &lt;/div&gt;
            &lt;button
            class=&quot;btn btn-primary btn-action btn-lg slides-next&quot;
            @click=&quot;changePhoto(+1)&quot;
            :disabled=&quot;nextBtn&quot;&gt;
                &lt;i class=&quot;icon icon-arrow-right&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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(() =&gt; props.images[numberPhoto.value].url);
      const nextBtn = computed(() =&gt; numberPhoto.value === lenghtTablePhotos.value);
      const prevBtn = computed(() =&gt; numberPhoto.value === 0);
      const infoSlides = computed(() =&gt; `${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) =&gt; console.log(url))
            .catch(console.log('err'));
        }
      }
  
      return {
        numberPhoto,
        activeUrl,
        lenghtTablePhotos,
        changePhoto,
        nextBtn,
        prevBtn,
        infoSlides,
      };
    },
  };
  &lt;/script&gt;
  
  &lt;style lang=&quot;scss&quot; scoped&gt;
  
  .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;
      }
  
  &lt;/style&gt;
  </code></pre>
  <p>and my js file:</p>
  <p><code>loader.js</code></p>
  <pre><code>export function loader(url) {
    const img = document.createElement('img');
    return new Promise((resolve, reject) =&gt; {
      // eslint-disable-next-line no-unused-vars
      img.onload = () =&gt; resolve(url);
      img.onerror = () =&gt; reject(url);
      img.src = url;
    });
  }
  </code></pre>
  <p>but it doesnt work, can someone help ?</p>
  <p><a href="https://i.stack.imgur.com/QQxiO.png" rel="nofollow noreferrer">enter image description here</a></p>