{"action":"opened","issue":{"url":"https://api.github.com/repos/matfish2/vue-tables-2/issues/12","repository_url":"https://api.github.com/repos/matfish2/vue-tables-2","labels_url":"https://api.github.com/repos/matfish2/vue-tables-2/issues/12/labels{/name}","comments_url":"https://api.github.com/repos/matfish2/vue-tables-2/issues/12/comments","events_url":"https://api.github.com/repos/matfish2/vue-tables-2/issues/12/events","html_url":"https://github.com/matfish2/vue-tables-2/issues/12","id":185731963,"number":12,"title":"Reactivity of list filters.","user":{"login":"Allexxander","id":7345874,"avatar_url":"https://avatars.githubusercontent.com/u/7345874?v=3","gravatar_id":"","url":"https://api.github.com/users/Allexxander","html_url":"https://github.com/Allexxander","followers_url":"https://api.github.com/users/Allexxander/followers","following_url":"https://api.github.com/users/Allexxander/following{/other_user}","gists_url":"https://api.github.com/users/Allexxander/gists{/gist_id}","starred_url":"https://api.github.com/users/Allexxander/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Allexxander/subscriptions","organizations_url":"https://api.github.com/users/Allexxander/orgs","repos_url":"https://api.github.com/users/Allexxander/repos","events_url":"https://api.github.com/users/Allexxander/events{/privacy}","received_events_url":"https://api.github.com/users/Allexxander/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-10-27T17:27:49Z","updated_at":"2016-10-27T17:27:49Z","closed_at":null,"body":"- Vue.js version: 2.0\r\n- Consumed using: Webpack with Laravel's Elixir\r\n- Server Table\r\n\r\nHi!\r\n\r\nI've [forked](https://github.com/Allexxander/vue-tables-2) your repository in order to add some small features, but I've encountered a little problem.\r\n\r\nWhat I've added:\r\n\r\n- 1. When receiving data from server, before, only `data` and `count` were populated. Now you can return a `custom_data` from the server too. You can access the `custom_data` property directly from the table component(e.g. using `$refs`). Returning `custom_data` on the server is **optional**.\r\n- 2. When receiving data from server, before only a `vue-tables.loaded` event was dispatched, now it also calls an **optional** parent callback method `loaded`. I believe this way is more comfortable for writing custom logic for each unique component, rather than using event listeners. Example:\r\n```\r\nVue.component('something', {\r\n\ttemplate: '<v-server-table :url=\"\" :columns=\"\" :options=\"\"></v-server-table>',\r\n\tmethods: {\r\n\t\tloaded: function (data) {\r\n\t\t\t// I will be called when the data in the table is loaded.\r\n\t\t},\r\n\t}\r\n})\r\n```\r\n- 3. My main goal and the problem: \r\n\r\nI have a table with polls. A poll belongs to a category. Above the \"category\" column I need a dropdown filter with all the categories listed. So I must somehow parse the polls and the categories **in 1 request.**\r\nIn order to achieve this goal, my server is returning this data for example:\r\n```\r\ndata : $polls,\r\ncount : 10,\r\ncustom_data : [ 'categories' : $categories ]\r\n```\r\n(Yes, that's why I implemented the feature mentioned in point 1)\r\n\r\nOk, so now my categories are available at `custom_data.categories`. I have to find a way to populate the dropdown filter with these categories.\r\n\r\n<img width=\"1796\" alt=\"screen shot 2016-10-27 at 19 51 21\" src=\"https://cloud.githubusercontent.com/assets/7345874/19777243/f8f3931c-9c7f-11e6-9c27-d10bda23565d.png\">\r\n\r\nIn the template `list-filter.jsx` all the dropdown options are stored in a **local** variable called `options`. I replaced this **local** variable with a **global** variable so that I could access this data from outside the template.\r\nThis new variable is an array keyed by column names, called `selectValues` and is stored in `opts`.  Example: ```THETABLE.opts.selectValues['category']``` will contain the dropdown values for the column `category`.\r\n[See my commit.](https://github.com/Allexxander/vue-tables-2/commit/6103266653cfa4276c34ae58e377d818d14197fd#diff-e079d27d8df36227e9674bfa290335daR1)\r\n\r\nAnd now, using the new callback method `loaded`(mentioned in point 2), I get the `categories` from `custom_data` (parsed from the server) and add them into this \"global variable\" from `list-filter.jsx`.\r\nExample:\r\n```\r\nloaded: function (data) {\r\n\tvar that = this;\r\n\r\n\t// Here we take each category and try to insert them into the dropdown.\r\n\r\n\tthis.$refs.THETABLE.custom_data.subcategories.map(function(option) {\r\n\t\tthat.$refs.THETABLE.opts.selectValues['category'].push(option)\r\n\t})\t\r\n}\r\n```\r\n\r\nThe `selectValues['category']` updates and the dropdown from the screenshot is linked to this variable as well, HOWEVER the list filters are not reactive! The dropdown doesn't update.\r\nOnce the jsx has been compiled, you can't update it?\r\n\r\nDo you have any ideas? I hope you understood the idea correctly, let me know if it's not clear.\r\nP.S. If you think these small features are useful, I can do a pull request. :) \r\nLooking forward to hearing from you. "}}
{"actor":{"display_login":"Allexxander"}}