Getting an error “Cannot convert undefined or null to object” on Vue component

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>

ebyte · Accepted Answer · 2020-06-15 11:57:30Z

1

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

answered Jun 15, 2020 at 11:57

ebyte

1,5173 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sylhare Over a year ago

Hey there, try to add some explanation with your answer to help people use it.

Andrew E Over a year ago

The better answer because the typeof solves the problem of the data being "truthy" but not an object, in one go. In TypeScript it can be simplified to if (typeof response?.data?.data === 'object').

thealpha93 · Accepted Answer · 2020-06-15 11:50:35Z

0

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

answered Jun 15, 2020 at 11:50

thealpha93

7884 silver badges15 bronze badges

Collectives™ on Stack Overflow

Getting an error “Cannot convert undefined or null to object” on Vue component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related