I have a problem with my slider on vue3:

SlideShow

<template>
  <div >
    <button
    
    @click="changePhoto(-1)"
    :disabled="prevBtn">
              <i ></i>
          </button>
          <div >
              <Slide
              :url="activeUrl"
              :text="infoSlides"/>
          </div>
          <button
          
          @click="changePhoto( 1)"
          :disabled="nextBtn">
              <i ></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

CodePudding user response：

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

CodePudding user response：

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

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

CodePudding user response：

Thanks, but now i have one more problem. The function seems to catch error. I used async and await but its doesnt work.

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

i changed my function and still nothing...

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