Enhancement to support issue #268

David-Desmaisons · David-Desmaisons · commit fbc41b97d2fe · 2017-12-30T15:58:15.000-02:00
diff --git a/dist/vuedraggable.js b/dist/vuedraggable.js
@@ -111,6 +111,11 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
       move: {
         type: Function,
         default: null
+      },
+      componentData: {
+        type: Object,
+        required: false,
+        default: null
       }
     };
 
@@ -141,7 +146,18 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
           children = slots ? [].concat(_toConsumableArray(slots), _toConsumableArray(footer)) : [].concat(_toConsumableArray(footer));
         }
         var attributes = null;
-        attributes = buildAttribute(attributes, 'attrs', this.$attrs);
+        var update = function update(name, value) {
+          attributes = buildAttribute(attributes, name, value);
+        };
+        update('attrs', this.$attrs);
+        if (this.componentData) {
+          var _componentData = this.componentData,
+              on = _componentData.on,
+              _props = _componentData.props;
+
+          update('on', on);
+          update('props', _props);
+        }
         return h(this.element, attributes, children);
       },
       mounted: function mounted() {
diff --git a/dist/vuedraggable.min.js b/dist/vuedraggable.min.js
diff --git a/examples/Component3.html b/examples/Component3.html
@@ -15,7 +15,7 @@
 <body>
 
     <div id="app">
-        <draggable element="el-collapse" :list="list" :options="sortOptions" :component-data="componentData">
+        <draggable element="el-collapse" :list="list" :options="sortOptions" :component-data="getComponentData()">
             <el-collapse-item v-for="(item) in list" :title="item.title" :name="item.name" :key="item.name">
                 <div>{{item.description}}</div>
             </el-collapse-item>
diff --git a/examples/script/component3.js b/examples/script/component3.js
@@ -6,6 +6,20 @@ var App = new Vue({
   methods: {
     handleChange() {
       console.log('times are changing');
+    },
+    inputChanged(value) {
+      this.activeNames = value;
+    },
+    getComponentData() {
+      return {
+        on: {
+          change: this.handleChange,
+          input: this.inputChanged
+        },
+        props: {
+          value: this.activeNames
+        }
+      };
     }
   },
   data() {
@@ -16,14 +30,12 @@ var App = new Vue({
         group: 'sample',
         animation: 150,
       },
-      componentData:{
-        on:{
+      componentData: {
+        on: {
           change: this.handleChange,
-          input(value){
-            this.activeNames = value;
-          }
+          input: this.inputChanged
         },
-        props:{
+        props: {
           value: this.activeNames
         }
       },
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
@@ -85,6 +85,11 @@
       move: {
         type: Function,
         default: null
+      },
+      componentData: {
+        type: Object,
+        required: false,
+        default: null
       }
     }
 
@@ -115,7 +120,13 @@
           children = slots ? [...slots, ...footer] : [...footer]
         }
         var attributes = null;
-        attributes = buildAttribute(attributes, 'attrs', this.$attrs);
+        const update = (name, value) => { attributes = buildAttribute(attributes, name, value); };
+        update('attrs', this.$attrs);
+        if (this.componentData) {
+          const { on, props } = this.componentData;
+          update('on', on);
+          update('props', props);
+        }
         return h(this.element, attributes, children);
       },
 
