Здесь не работает слайдер, а именно когда я делаю свайп пишет что: Uncaught TypeError: Cannot read properties of undefined (reading 'length') к this.data.length. Спасибо
Вот мой код:
async asyncData({$axios}) {
// eslint-disable-next-line camelcase
const promiseGetProduct = await $axios.$get(`https://quiet-basin-404555.herokuapp.com/files/gallery-photos`)
return {
data: promiseGetProduct
}
},
data() {
return {
id: this.$route.params.id,
isActive: false,
}
},
mounted() {
const images = document.querySelector('.images')
const gallery = document.querySelector('.gallery')
const images2 = document.querySelector('.images2')
console.log(this.data.length)
const id2 = this.id - 1
if (window.innerWidth < 768 && this.data[this.$route.params.id - 1].image.width < 600) {
this.isActive = false
images.classList.add('moreInfo')
} else {
this.isActive = true
}
if (this.data[id2].image.width > 1200) {
gallery.classList.add('gallery-class-one-element')
images.remove()
} else {
gallery.classList.add('gallery-class-two-element')
images2.remove()
}
// SWIPE
setTimeout(() => {
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
let xDown = null;
let yDown = null;
//
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
}
//
function handleTouchMove(evt) {
if (!xDown || !yDown) {
return;
}
const xUp = evt.touches[0].clientX;
const yUp = evt.touches[0].clientY;
const xDiff = xDown - xUp;
const yDiff = yDown - yUp;
if (Math.abs(xDiff) > Math.abs(yDiff)) {
if (xDiff > 0) {
if (this.data.length !== parseInt(this.$route.params.id, 10)) {
const id = parseInt(this.$route.params.id, 10) + 1
this.$router.push(`/gallery-page/${id}`)
// setTimeout(() => {
// location.reload()
// }, 600)
}
} else if (parseInt(this.$route.params.id, 10) !== 1) {
const id = parseInt(this.$route.params.id, 10) - 1
this.$router.push(`/gallery-page/${id}`)
// setTimeout(() => {
// location.reload()
// }, 600)
}
}
xDown = null;
yDown = null;
}
}, 2500)
},