Encountering an error message "Cannot convert undefined or null to object" with this VueJs Slider. You can see it in action on this website (It's the first component on the page). The slider's functionality is working fine, but I'm looking to troubleshoot the error in the console. Any suggestions or insights would be greatly appreciated. Note: Some code has been omitted for brevity.
<template>
<div id="vue-slider">
<div
id="button-toggle-container"
class="button-toggle-container flex justify-center justify-between mt3 mb4 mx-auto"
>
<button
class="button-toggle"
v-for="(slidePanelKey, mainIndex) in Object.keys(slider)"
:id="slidePanelKey"
:key="mainIndex"
@click="setActivePanel(mainIndex)"
:class="{active: mainIndex == activeButtonIndex}"
>{{ slidePanelKey }}</button>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "slider",
props: {
slide: Object
},
data() {
return {
slider: null,
retrieved: {
slider: false
}
}
},
mounted: function () {
// Retrieve slides data.
axios
.get(
"/api/?hash=API-KEY&type=slider" +
"&context=" + this.getContext()
)
.then(response => {this.slider = response.data.data
this.slide = Object.values(this.slider)
})
// eslint-disable-next-line
.catch(error => console.log(error))
},
},
};
</script>