{"action":"created","issue":{"url":"https://api.github.com/repos/yyx990803/vue/issues/814","labels_url":"https://api.github.com/repos/yyx990803/vue/issues/814/labels{/name}","comments_url":"https://api.github.com/repos/yyx990803/vue/issues/814/comments","events_url":"https://api.github.com/repos/yyx990803/vue/issues/814/events","html_url":"https://github.com/yyx990803/vue/issues/814","id":72229828,"number":814,"title":"$index on v-repeat with orderBy","user":{"login":"rogierborst","id":1092005,"avatar_url":"https://avatars.githubusercontent.com/u/1092005?v=3","gravatar_id":"","url":"https://api.github.com/users/rogierborst","html_url":"https://github.com/rogierborst","followers_url":"https://api.github.com/users/rogierborst/followers","following_url":"https://api.github.com/users/rogierborst/following{/other_user}","gists_url":"https://api.github.com/users/rogierborst/gists{/gist_id}","starred_url":"https://api.github.com/users/rogierborst/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rogierborst/subscriptions","organizations_url":"https://api.github.com/users/rogierborst/orgs","repos_url":"https://api.github.com/users/rogierborst/repos","events_url":"https://api.github.com/users/rogierborst/events{/privacy}","received_events_url":"https://api.github.com/users/rogierborst/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-04-30T17:37:05Z","updated_at":"2015-08-07T11:16:48Z","closed_at":"2015-05-01T07:04:04Z","body":"When using `v-repeat`, I understand you can use `$index` inside the loop to get the array index of the current object. If you'd use `v-repeat` on say, a list item, this means that the top / first `<li>` has `$index = 0`, the second `$index = 1`, etc.\r\nBut when you use an `orderBy` filter on that `v-repeat`, there is absolutely no guarantee that the first `<li>` has `$index = 0`, because `$index` is pointing to the index of the original array, not the *re-ordered* array.\r\n\r\nWhat I'd like to do, is inside the `v-repeat` compare the currently processed object with the previously processed object, i.e.:\r\n```html\r\n<ul>\r\n    <template v-repeat=\"objects | orderBy 'date' | filterBy search 'title'\">\r\n    <!-- $index-1 might not be the previously processed object -->\r\n    <li v-if=\"objects[$index -1].date !== objects[$index].date\">---</li>\r\n    <li>{{title}} - {{date}}</li>\r\n    </template>\r\n</ul>\r\n```\r\n\r\nThis works great when the original array was already ordered by date, but if it was not - and let's, for the sake of the argument, assume that it wasn't - this becomes a mess. `v-repeat` first orders the array by date, then loops over the array in that new order, but inside each loop `$index` refers to the position in the unordered array.\r\n\r\nHere's what worked for me in Angular, to illustrate how it could be handled:\r\n```html\r\n<ul>\r\n    <li ng-repeat-start=\"object in (orderedObjects = (objects | orderBy: 'date' | filter:title))\"\r\n        ng-if=\"object.date != orderedObjects[$index-1].month\">\r\n    <li ng-repeat-end>{{object.title}} - {{object.date}}</li>\r\n</ul>\r\n```\r\n\r\nHere a new, temporary array is created (`orderedObjects`) with the correct order and now $index points to the index in that ordered array, instead of the original one (`objects`).\r\n\r\nAny way to achieve this with Vue?\r\n"},"comment":{"url":"https://api.github.com/repos/yyx990803/vue/issues/comments/128677808","html_url":"https://github.com/yyx990803/vue/issues/814#issuecomment-128677808","issue_url":"https://api.github.com/repos/yyx990803/vue/issues/814","id":128677808,"user":{"login":"timavo","id":10407764,"avatar_url":"https://avatars.githubusercontent.com/u/10407764?v=3","gravatar_id":"","url":"https://api.github.com/users/timavo","html_url":"https://github.com/timavo","followers_url":"https://api.github.com/users/timavo/followers","following_url":"https://api.github.com/users/timavo/following{/other_user}","gists_url":"https://api.github.com/users/timavo/gists{/gist_id}","starred_url":"https://api.github.com/users/timavo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/timavo/subscriptions","organizations_url":"https://api.github.com/users/timavo/orgs","repos_url":"https://api.github.com/users/timavo/repos","events_url":"https://api.github.com/users/timavo/events{/privacy}","received_events_url":"https://api.github.com/users/timavo/received_events","type":"User","site_admin":false},"created_at":"2015-08-07T11:16:48Z","updated_at":"2015-08-07T11:16:48Z","body":"I got a list of `users` which are displayed with `v-repeat`. \r\n\r\nHTML: \r\n```\r\n<ul id=\"vue\">\r\n    <li v-repeat=\"users | orderBy 'name'\" v-on=\"click: onClick($index)\">@{{ name }} | @{{ phone }}</li>\r\n</ul>\r\n```\r\n\r\nJavaScript:\r\n```\r\nnew Vue({\r\n    el: '#vue',\r\n\r\n    data: {\r\n        users: [\r\n            { name: 'Berta', phone: '555-123-4567' },\r\n            { name: 'Delta', phone: '999-123-4567' },\r\n            { name: 'Anton', phone: '888-123-4567' },\r\n            { name: 'Echo', phone: '333-123-4567' },\r\n            { name: 'Charlie', phone: '444-123-4567' }\r\n        ]\r\n    },\r\n\r\n    methods: {\r\n        onClick: function(index) {\r\n            this.users.$remove(index);\r\n        }\r\n    }\r\n});\r\n```\r\n\r\nIf I just use `v-repeat=\"users\"`, I can access the original user with `this.users[$index]`. However, if I manipulate the list by ordering and/or filtering (e.g. `v-repeat=\"users | orderBy 'name'\"`), `$index` points to the element in the ordered list.\r\n\r\nWhat I'd like to do is removing an element from the original `users` array. As stated above `this.users.$remove($index)` only works on the original `v-repeat`, not on filtered or ordered lists."}}