[FIX]: Swipe的子组件通过异步加载进来初始化失败。

Author: shenlq

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-impression",
-  "version": "0.13.11",
+  "version": "0.13.13",
   "description": "A Vue.js 2.0 UI elements for mobile.",
   "main": "dist/scripts/components/index.js",
   "scripts": {

src/scripts/components/Swipe.vue

@@ -193,13 +193,21 @@
                     this.negative = false;
                 }
             },
+            // 异步swipeItem
+            length() {
+                if(this.length) {
+                    this.initDrag();
+                    this.play();
+                }
+            },
         },
         mounted() {
             this.init();
-            this.initDrag();
-            this.play();
         },
         updated() {
+            this.$nextTick(() => {
+                this.init();
+            });
             setTimeout(() => {
                 this.transitioning = false;
             }, this.speed);

src/scripts/views/swipe.vue

@@ -5,20 +5,8 @@
             :onDragStart="onDragStart"
             :onDrag="onDrag"
             :onDragEnd="onDragEnd">
-            <swipe-item>
-                <div class="page-swipe-item bg-primary">1</div>
-            </swipe-item>
-            <swipe-item>
-                <div class="page-swipe-item bg-secondary">2</div>
-            </swipe-item>
-            <swipe-item>
-                <div class="page-swipe-item bg-success">3</div>
-            </swipe-item>
-            <swipe-item>
-                <div class="page-swipe-item bg-warning">4</div>
-            </swipe-item>
-            <swipe-item>
-                <div class="page-swipe-item bg-danger">5</div>
+            <swipe-item v-for="item in swipeItems">
+                <div class="page-swipe-item" :class="item.theme">{{item.text}}</div>
             </swipe-item>
         </swipe>
         <group-title>defaultIndex=1</group-title>
@@ -62,6 +50,11 @@
 
 <script>
     export default {
+        data() {
+            return {
+                swipeItems: [],
+            };
+        },
         methods: {
             onDragStart(index) {
                 this.$toast({
@@ -79,6 +72,26 @@
                 });
             },
         },
+        mounted() {
+            setTimeout(() => {
+                this.swipeItems = [{
+                    text: 1,
+                    theme: 'bg-primary',
+                }, {
+                    text: 2,
+                    theme: 'bg-secondary',
+                }, {
+                    text: 3,
+                    theme: 'bg-success',
+                }, {
+                    text: 4,
+                    theme: 'bg-warning',
+                }, {
+                    text: 5,
+                    theme: 'bg-danger',
+                }];
+            }, 1000);
+        },
     };
 </script>