Vue3 Object-than不是函数

Question

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

但是它不起作用，有人能帮忙吗？

在此处输入图像描述

Answer 1

您必须在变量上使用reactive才能使用Composition API，u可以访问

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

Answer 2

您在调用.then function时出现了拼写错误。您编写的是than而不是then！