仅在chrome-dev-tool中单击“inspect”后渲染vue-carousel-3d

omqzjyyz 于 2023-06-06 发布在 Vue.js

关注(0)|答案(2)|浏览(161)

我用的是VueJS 2.5.3。Vue-carousel-3d不会渲染，直到我点击“检查”（谷歌开发工具）。点击后，它呈现为我不会。此外，我注意到，www.example.com中的“事件”Vue.data是按我习惯的方式计算的。'/API/afisha/这是我自己的rest api，它的工作是正确的。
我的vue示例和html模板请帮帮我！
我的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="'&#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>

vue.js

来源：https://stackoverflow.com/questions/50450020/rendering-vue-carousel-3d-only-after-clicking-inspect-in-chrome-dev-tool

2条答案

按热度按时间

b4wnujal1#

根据Vue关于[beforeCreate]的文档[1]
在示例初始化之后、数据观察和事件/观察器设置之前立即同步调用。
如果API如此之快，由于没有初始化监视器或数据结构，vm.events = response.data可能会被组件设置过程覆盖。
我觉得你最好在created钩子中调用API
在创建示例后同步调用。在此阶段，示例已完成处理选项，这意味着已设置以下内容：数据观察、计算属性、方法、监视/事件回调

已更新

根据文档，您需要传递props count以启用React性数据

<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

赞(0）回复(0）举报 2023-06-06

qvk1mo1f2#

正如我所理解的，这是一个错误，但是可以通过初始化一个具有足够数量的空对象的数组来修复。在您的情况下，而不是：

data: {
    events: [],
  },

使用这个：

data: {
    events: [{}, {}, {}, {}, {}],
  },

赞(0）回复(0）举报 2023-06-06

我来回答

仅在chrome-dev-tool中单击“inspect”后渲染vue-carousel-3d

2条答案

相关问题

热门标签

最新问答