{"action":"closed","issue":{"url":"https://api.github.com/repos/RubaXa/Sortable/issues/651","labels_url":"https://api.github.com/repos/RubaXa/Sortable/issues/651/labels{/name}","comments_url":"https://api.github.com/repos/RubaXa/Sortable/issues/651/comments","events_url":"https://api.github.com/repos/RubaXa/Sortable/issues/651/events","html_url":"https://github.com/RubaXa/Sortable/issues/651","id":116913849,"number":651,"title":"Data length in sortable less then the data that is displayed","user":{"login":"xtrasmal","id":1174877,"avatar_url":"https://avatars.githubusercontent.com/u/1174877?v=3","gravatar_id":"","url":"https://api.github.com/users/xtrasmal","html_url":"https://github.com/xtrasmal","followers_url":"https://api.github.com/users/xtrasmal/followers","following_url":"https://api.github.com/users/xtrasmal/following{/other_user}","gists_url":"https://api.github.com/users/xtrasmal/gists{/gist_id}","starred_url":"https://api.github.com/users/xtrasmal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xtrasmal/subscriptions","organizations_url":"https://api.github.com/users/xtrasmal/orgs","repos_url":"https://api.github.com/users/xtrasmal/repos","events_url":"https://api.github.com/users/xtrasmal/events{/privacy}","received_events_url":"https://api.github.com/users/xtrasmal/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/RubaXa/Sortable/labels/question","name":"question","color":"cc317c"},{"url":"https://api.github.com/repos/RubaXa/Sortable/labels/react","name":"react","color":"61dafb"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-11-14T09:31:29Z","updated_at":"2015-12-18T23:17:24Z","closed_at":"2015-12-18T23:17:24Z","body":"Hi there,\r\n\r\nI store an item to the database, then get the new list from the database. Then I  do a sortable.create again and noticed that the data in sortable has less objects then the data retrieved from the database.\r\n\r\nAny ideas where to begin looking?\r\n\r\n\r\n```javascript\r\n\r\n/**\r\n * Checklists module\r\n * It needs a resource from outside to populate\r\n * @type Object\r\n */\r\nvar SortableMixin = require('../sortable/sortable-mixin');\r\n\r\nvar Checklists = {\r\n\r\n    mixins: [SortableMixin],\r\n\r\n    props: ['resource'],\r\n\r\n    template: require('./views/checklists.template.html'),\r\n\r\n    data: function() {\r\n        return {\r\n            'checklists': []\r\n        }\r\n    },\r\n\r\n    ready: function() {\r\n        this.fetchData();\r\n    },\r\n\r\n    methods: {\r\n\r\n        /**\r\n         * Fetch the checklists from the database\r\n         */\r\n        fetchData: function() {\r\n            var resource = this.$resource(this.resource);\r\n\r\n            resource.get(function (data, status, request) {\r\n\r\n                this.checklists = data;\r\n\r\n                console.log(data.length);\r\n                console.log(this.checklists.length);\r\n\r\n                this.create(data);\r\n\r\n                this.$dispatch('action-success');\r\n\r\n            }).error(function (data, status, request) {\r\n\r\n                this.$dispatch('action-error');\r\n            });\r\n\r\n        },\r\n        /**\r\n         * Store the data to the database\r\n         */\r\n        storeData: function(data) {\r\n            this.$http.post(this.resource, JSON.stringify(data), function(){\r\n\r\n                this.fetchData();\r\n            }).error(function (data, status, request) {\r\n                console.log('Checklists could not be stored');\r\n            });\r\n        },\r\n    },\r\n\r\n    events: {\r\n        'workflow-added': function(data) {\r\n            this.storeData(data);\r\n        },\r\n        'workflows-loaded': function (data) {\r\n            console.log(\"Workflows says it's loaded\");\r\n        },\r\n        'ended-sorting': function(data) {\r\n            console.log(data.length);\r\n            console.log(this.checklists.length);\r\n            for (var i=0; i < data.length; i++) {\r\n                data[i].sort_order = i;\r\n            }\r\n\r\n            this.storeData(data);\r\n\r\n        }\r\n    }\r\n\r\n};\r\n\r\nmodule.exports = Checklists;\r\n\r\n\r\n```\r\n\r\n```javascript\r\n\r\n\r\n/**\r\n * SortableMixin\r\n * Usage: Call this.create(some-data);\r\n * @param  Array list\r\n */\r\nvar SortableMixin = {\r\n\r\n    data: function(){\r\n        return {\r\n            'sortable': null\r\n        }\r\n    },\r\n\r\n    methods: {\r\n        /**\r\n         * Create a new instance of the Sortable plugin\r\n         * @param  data\r\n         */\r\n        create: function(data){\r\n\r\n            var el = this.$el;\r\n            var self = this;\r\n\r\n            this.sortable = require('sortablejs');\r\n\r\n            this.sortable.create(el, {\r\n                draggable: 'div',\r\n                handle: '.fa',\r\n                animation: 150,\r\n                group: \"name\",  // or { name: \"...\", pull: [true, false, clone], put: [true, false, array] }\r\n                sort: true,  // sorting inside list\r\n                delay: 0, // time in milliseconds to define when the sorting should start\r\n                disabled: false, // Disables the sortable if set to true.\r\n                store: null,  // @see Store\r\n                filter: \".ignore-elements\",  // Selectors that do not lead to dragging (String or Function)\r\n                ghostClass: \"sortable-ghost\",  // Class name for the drop placeholder\r\n                chosenClass: \"sortable-chosen\",  // Class name for the chosen item\r\n                dataIdAttr: 'data-id',\r\n\r\n                forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in\r\n                fallbackClass: \"sortable-fallback\",  // Class name for the cloned DOM Element when using forceFallback\r\n                fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body\r\n\r\n                scroll: true, // or HTMLElement\r\n                scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.\r\n                scrollSpeed: 10, // px\r\n\r\n                /**\r\n                 * Vue has shadowDOM comment Nodes,\r\n                 * which we will move to the end.\r\n                 */\r\n                onEnd: function () {\r\n                    var comment = el.firstChild;\r\n                    do {\r\n                        if (comment.nodeType == 8) {\r\n                            el.removeChild(comment);\r\n                            el.appendChild(comment);\r\n                            console.log(comment);\r\n                        }\r\n\r\n                    } while (comment = comment.nextSibling);\r\n\r\n                    self.$emit('ended-sorting', data);\r\n\r\n                },\r\n\r\n                /**\r\n                 * We track the position of the list item\r\n                 * by it's data-id and update the list.\r\n                 */\r\n                onUpdate: function(e) {\r\n                    var oldPosition = e.item.getAttribute('data-id');\r\n                    var newPosition = this.toArray().indexOf(oldPosition);\r\n                    data.splice(newPosition, 0, data.splice(oldPosition, 1)[0]);\r\n\r\n                }\r\n\r\n            });\r\n\r\n        }\r\n    }\r\n\r\n}\r\nmodule.exports = SortableMixin;\r\n\r\n\r\n```\r\n\r\n```html\r\n\r\n\r\n<div id=\"checklists\">\r\n    <div v-for=\"checklist in checklists\" track-by=\"id\" data-id=\"{{$index}}\">\r\n        <span class=\"fa fa-bars\" aria-hidden=\"true\"></span>\r\n        <a v-link=\"{ path: '/workflows', activeClass: 'active' }\">\r\n            {{checklist.name}} [{{checklist.id}}][{{checklist.sort_order}}][{{$index}}]\r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n```\r\n"}}