From c2db4f928c0ce3141f132163ad631379e866554e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 30 Mar 2017 16:26:44 +0800
Subject: [PATCH] fixed #540

---
 examples/routers/grid.vue   | 37 ++++++++++++++++++++-----------------
 src/components/grid/col.vue | 11 +++++++++++
 src/components/grid/row.vue |  3 ---
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/examples/routers/grid.vue b/examples/routers/grid.vue
index f8819b6c..b328ab9b 100644
--- a/examples/routers/grid.vue
+++ b/examples/routers/grid.vue
@@ -1,26 +1,29 @@
+<style>
+    .demo-col div{
+        background: #f50;
+    }
+</style>
 <template>
     <div>
-        <Row>
-            <i-col span="12">col-12</i-col>
-            <i-col span="12">col-12</i-col>
-        </Row>
-        <br>
-        <Row>
-            <i-col span="8">col-8</i-col>
-            <i-col span="8">col-8</i-col>
-            <i-col span="8">col-8</i-col>
-        </Row>
-        <br>
-        <Row>
-            <i-col span="6">col-6</i-col>
-            <i-col span="6">col-6</i-col>
-            <i-col span="6">col-6</i-col>
-            <i-col span="6">col-6</i-col>
+        <Row :gutter="16">
+            <i-col class-name="demo-col" span="4" v-for="i in n" key="i">
+                <div>col-8</div>
+            </i-col>
         </Row>
+        <Button @click="add">add</Button>
     </div>
 </template>
 <script>
     export default {
-
+        data () {
+            return {
+                n: 2
+            }
+        },
+        methods: {
+            add () {
+                this.n++;
+            }
+        }
     }
 </script>
diff --git a/src/components/grid/col.vue b/src/components/grid/col.vue
index 2bb00d3a..86bf6d64 100644
--- a/src/components/grid/col.vue
+++ b/src/components/grid/col.vue
@@ -67,6 +67,17 @@
 
                 return style;
             }
+        },
+        methods: {
+            updateGutter () {
+                this.$parent.updateGutter(this.$parent.gutter);
+            }
+        },
+        mounted () {
+            this.updateGutter();
+        },
+        beforeDestroy () {
+            this.updateGutter();
         }
     };
 </script>
diff --git a/src/components/grid/row.vue b/src/components/grid/row.vue
index 7de24ec7..322d1bbb 100644
--- a/src/components/grid/row.vue
+++ b/src/components/grid/row.vue
@@ -69,9 +69,6 @@
             gutter (val) {
                 this.updateGutter(val);
             }
-        },
-        mounted () {
-            this.updateGutter(this.gutter);
         }
     };
 </script>