[Vuejs]-Rendering vue-carousel-3d only after clicking "inspect" in chrome-dev-tool

by

0👍

✅

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="'&#10092;'" :controls-next-html="'&#10093;'" 
               :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

👤ittus

0👍

As I understanded, it is a bug, however can fix simply by initializing an array with enough count of empty objects. in your case, instead of:

  data: {
    events: [],
  },

use this:

  data: {
    events: [{}, {}, {}, {}, {}],
  },
👤hadi ahadi

Leave a comment