VueJs / 生命周期和 Javascript答案

【问题标题】：VueJs / Life cycle and JavascriptVueJs / 生命周期和 Javascript
【发布时间】：2017-01-20 01:42:27
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

我认为<carousel :array="myArray"></carousel> 应该是<carousel :myArray="array"></carousel>。
很抱歉，这只是一个打字错误。当我说它不起作用时，我没有任何错误，我只是感觉在 v-for 完成之前调用了新的 Siema 函数。

标签： javascript vue.js

【解决方案1】：

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

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

【讨论】：

很抱歉，这只是一个打字错误。当我说它不起作用时，我没有任何错误，我只是感觉在 v-for 完成之前调用了新的 Siema 函数。

【解决方案2】：

它不是使用mounted()，而是使用updated()

【讨论】：