首页 > 解决方案 > 在 Vue 组件上收到错误“无法将未定义或 null 转换为对象”

问题描述

在此 VueJs 滑块上收到错误“无法将未定义或 null 转换为对象”。它在这里工作http://novo.evbox.com/(它是页面上的第一个组件)。该功能有效,但我想解决控制台中的错误。有没有人有任何见解?注意:为简洁起见,我删除了一些代码。

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

标签: javascriptvue.js

解决方案


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

推荐阅读