Question

我正在使用VueJS 2.5.3。 Vue-carousel-3d不会渲染，直到我点击'Inspect'（谷歌开发工具）。点击它之后渲染，因为我不会。此外，我注意到，Vue.data中的'events'是按我不计算的。 '/ api / afisha /我自己的休息api，它的工作正确。

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

我的vue insta

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

{{1}}

Answer 1

根据Vue关于beforeCreate

的文件

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

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

我认为您最好在created hook

中调用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

只有在chrome-dev-tool中单击“inspect”后才能渲染vue-carousel-3d

1 个答案: