Laravel 5 {{obj.data}}在axios获取后未在vue模板中显示

我正在尝试使用Laravel5.6和Vue.js构建一个旋转木马。我可以从db和console.log response.data调用数据。它像预期的那样工作。下面的脚本

<script>
  $(document).ready(function() {
      $("#availability").owlCarousel();
  });

  export default {
    props: {
      areaId: null,
      tutorId: null,
    },
    data () {
      return {
        availability: []
      }
    },

    methods: {
      getAvailability () {
        var that = this;
        axios.get( '/' + this.areaId + '/' + this.tutorId + '/availability').then((response) => {
          console.log(response.data)
          that.availability = response.data;
        });
      }
    },

    mounted () {
      this.getAvailability();
    }
  }
</script>

到

数据对象在vue开发工具中显示为未定义，并且{{availability.monday_begin}}抛出一个错误，无法读取未定义的属性

根据我读到的几篇不同的文章，我还尝试在模板中添加一个v-if，但没有任何效果

---

谢谢你的帮助

可用性是一个对象数组还是单个对象？您的数据函数中有可用性数组和作为对象的vue模板。它是单个对象。请尝试将可用性从数组[]更改为Null。它破坏了旋转木马并从Null的template cannot read属性中吐出一个错误。我想它应该是一个具有多个属性的单个对象吗？

that.availability = response.data;

that.availability = response.data.data;