I am using VueJS 2.5.3. Vue-carousel-3d wont rendering until I click on 'Inspect' (google dev tool). After clicking it renders as I wont. Besides, i noticed, that 'events' in Vue.data is computed as I wont. '/api/afisha/ its my own rest api, its work correct.
its my vue instance and html template. Help me please!
its my vue insta
new Vue({
el: '#ttt',
data: {
events: [],
},
beforeCreate: function(){
vm = this
axios.get('/api/afisha/').then(function(response){
vm.events = response.data
console.log(response)
});
},
components: {
'carousel-3d': Carousel3d.Carousel3d,
'slide': Carousel3d.Slide
},
delimiters: ["[[","]]"]
});
<div id="ttt" class="container-fluid screen-2 panel" style="top: calc(1*100%);">
<div class="promo-slid">
<p>Подивіться на наших котят!</p>
</div>
<div class="slider">
<carousel-3d :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'"
:controls-width="30" :controls-height="60" :clickable="false">
<slide v-for="(event, i) in events" :index="i">
<figure>
<img v-bind:src="event.images">
</figure>
</slide>
</carousel-3d>
</div>
</div>
According to Vue's document about [beforeCreate][1]
Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.
If API is so fast, since there are no watchers or data structures initialized, vm.events = response.data might be override by component set up process.
I think you had better call API in created hook
Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks
Updated
According to document, you need to pass props count to enable reactive data
<carousel-3d :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'"
:controls-width="30" :controls-height="60" :clickable="false" :count="events.length">
<slide v-for="(event, i) in events" :index="i" :key="i">
<figure>
<img v-bind:src="event.images">
</figure>
</slide>
</carousel-3d>
Demo https://codesandbox.io/s/4jvnmz2n27 [1]: https://v2.vuejs.org/v2/api/#beforeCreate