{{obj.data}} не отображается в шаблоне vue после получения axios - PullRequest
Новая
       8

{{obj.data}} не отображается в шаблоне vue после получения axios

0 голосов
/ 27 июня 2018

Я пытаюсь построить карусель, используя Laravel 5.6 и Vue.js. Я могу вызвать данные из базы данных и 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>

Теперь я ожидаю, что смогу отображать данные как

{{Availability.monday_begin}}

но ничего не отображается, пустые теги.

Когда я добавляю второй .data к ответу, поэтому меняю 

that.availability = response.data;

до 

that.availability = response.data.data;

Объект данных отображается как неопределенный в инструментах vue-dev, и {{наличие.monday_begin}} выдает ошибку, не может прочитать свойство undefined.

Я также попытался добавить v-if в шаблон, основываясь на нескольких прочитанных мной статьях, но ничего из того, что я пробовал, не сработало.

Спасибо за вашу помощь.

...