显示vue-carousel-3d，只需在chrome dev-tool中单击“检查”即可。

Question

我使用的是VueJS 2.5.3。Vue-carousel-3d不会呈现，直到我点击‘检查’(谷歌开发工具)。点击后，它会像我平时一样呈现。此外，我注意到，Vue.data中的“事件”是按照我的习惯计算的。'/ api /afisha/它自己的rest，它的工作是正确的。

它是我的vue实例和html模板。请救救我！

这是我的酒

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

Answer 1

根据Vue关于beforeCreate的文件

在初始化实例之后，在数据观察和事件/观察者设置之前立即同步调用。

如果API如此之快，由于没有初始化的观察者或数据结构，vm.events = response.data可能会被组件设置过程覆盖。

我认为您最好在created钩子中调用API。

在创建实例后同步调用。在此阶段，实例已经完成了选项的处理，这意味着已经设置了以下选项:数据观察、计算的属性、方法、监视/事件回调

更新的

根据文档，您需要传递道具count以启用反应性数据。

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

演示https://codesandbox.io/s/4jvnmz2n27 1：https://v2.vuejs.org/v2/api/#beforeCreate