在 Vue 组件上出现错误“无法将未定义或 null 转换为对象”

Question

Getting an error “Cannot convert undefined or null to object” on this VueJs Slider. It is working here http://novo.evbox.com/ (Its the first component on the page). The functionality works but I would like to solve the error in the console. Does anyone have any insights? Note: I have removed some code 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>

Answer 1

.then(response => {
  if(response.data && typeof response.data.data === 'object') {
    this.slide = Object.values(response.data.data)
  }
})

Answer 2

I think this will solve the issue

.then(response => {
  if(response.data && response.data.data) {
    this.slider = response.data.data
    this.slide = Object.values(this.slider)
  }
})