VueJs /生命周期和Javascript

Question

我正在尝试使用Siema生成旋转木马，但是当使用v-for生成幻灯片时，我无法使其工作。

我没有任何错误我感觉在v-for完成之前调用了新的Siema函数

我将javascript代码放入我的组件的mounted（）中。

如何使用v-for而不使用静态分区来使其工作？

App.vue

 <template>
       <carousel :my-array="myArray"></carousel>
    </template>

Carousel.vue（不工作）

<template>
    <div class="siema">
        <div v-for="(element, index) in myArray">{{index}}</div>
    </div>
</template>


<script>
import Siema from 'siema';

export default{
    props: ['myArray'],

    mounted() {
        new Siema();
    }

}
</script>

Carousel.vue（工作）

 <template>
       <div class="siema">
        <div>Hi, I'm slide 1</div>
        <div>Hi, I'm slide 2</div>
        <div>Hi, I'm slide 3</div>
        <div>Hi, I'm slide 4</div>
      </div>
    </template>


    <script>
    import Siema from 'siema';

    export default{
        props: ['myArray'],

        mounted() {
            new Siema();
        }

    }
    </script>

Answer 1

在vue.js中如果道具在camelCase中，你必须在HTML中use kebab-case，如下所示

<carousel :my-array="myArray"></carousel>. –

Answer 2

不使用mounted（），而是使用updated（）