{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/7924","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/7924/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/7924/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/7924/events","html_url":"https://github.com/vuejs/vue/issues/7924","id":309701010,"number":7924,"title":"root opts attributes support","user":{"login":"SassNinja","id":19912475,"avatar_url":"https://avatars1.githubusercontent.com/u/19912475?v=4","gravatar_id":"","url":"https://api.github.com/users/SassNinja","html_url":"https://github.com/SassNinja","followers_url":"https://api.github.com/users/SassNinja/followers","following_url":"https://api.github.com/users/SassNinja/following{/other_user}","gists_url":"https://api.github.com/users/SassNinja/gists{/gist_id}","starred_url":"https://api.github.com/users/SassNinja/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SassNinja/subscriptions","organizations_url":"https://api.github.com/users/SassNinja/orgs","repos_url":"https://api.github.com/users/SassNinja/repos","events_url":"https://api.github.com/users/SassNinja/events{/privacy}","received_events_url":"https://api.github.com/users/SassNinja/received_events","type":"User","site_admin":false},"labels":[{"id":217551163,"url":"https://api.github.com/repos/vuejs/vue/labels/feature%20request","name":"feature request","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-03-29T10:24:02Z","updated_at":"2018-03-29T13:05:32Z","closed_at":null,"author_association":"NONE","body":"### What problem does this feature solve?\r\nThe desired opts feature should offer the possibility to provide data from the markup (mostly from backend) to the vue instance.\r\nSo you can pass options/params from outside the vue scope. Example use case:\r\nhttps://forum.vuejs.org/t/passing-props-to-root-instances-in-2-0/244\r\n\r\nRight now this requires custom helpers/code to pipe the data through to the component.\r\nMuch better would be a more comfortable way similar the way riot does it with opts\r\nhttp://riotjs.com/api/#mounting\r\n\r\n\r\n### What does the proposed API look like?\r\nSince the instance root is not a custom tag (compared to riot) I can imagine using prefixed attributes e.g. `data-opt-[NAME]`\r\nSo the root may look like this:\r\n```html\r\n<div id=\"myRoot\" data-opt-firstname=\"John\" data-opt-lastname=\"Smith\"></div>\r\n```\r\nand within the template you can access it as\r\n```\r\n<template>\r\n    <span>Hello {{ opts.firstname }} {{ opts.lastname }}</span>\r\n</template>\r\n```\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/vuejs/vue/issues/comments/377228816","html_url":"https://github.com/vuejs/vue/issues/7924#issuecomment-377228816","issue_url":"https://api.github.com/repos/vuejs/vue/issues/7924","id":377228816,"user":{"login":"SassNinja","id":19912475,"avatar_url":"https://avatars1.githubusercontent.com/u/19912475?v=4","gravatar_id":"","url":"https://api.github.com/users/SassNinja","html_url":"https://github.com/SassNinja","followers_url":"https://api.github.com/users/SassNinja/followers","following_url":"https://api.github.com/users/SassNinja/following{/other_user}","gists_url":"https://api.github.com/users/SassNinja/gists{/gist_id}","starred_url":"https://api.github.com/users/SassNinja/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SassNinja/subscriptions","organizations_url":"https://api.github.com/users/SassNinja/orgs","repos_url":"https://api.github.com/users/SassNinja/repos","events_url":"https://api.github.com/users/SassNinja/events{/privacy}","received_events_url":"https://api.github.com/users/SassNinja/received_events","type":"User","site_admin":false},"created_at":"2018-03-29T13:05:32Z","updated_at":"2018-03-29T13:05:32Z","author_association":"NONE","body":"**- Update -**\r\n\r\nI've found a way that works for me although it somehow doesn't feel straight forward.\r\nLooks like this (this time I'm using pagination to have a more 'realistic' example):\r\n\r\nhome.html\r\n```html\r\n<body>\r\n    ...\r\n    <div class=\"pagination\" data-page=\"1\"></div>\r\n    <script src=\"/assets/dist/pagination.js\"></script>\r\n</body>\r\n````\r\n\r\nsrc/pagination.js\r\n```javascript\r\nimport Vue from 'vue'\r\nimport Pagination from './pagination.vue'\r\nnew Vue({\r\n    el: '.pagination',\r\n    render: h => h(Pagination),\r\n    data: { opts: {} },\r\n    beforeMount: function() {\r\n        this.opts = this.$el.dataset\r\n    }\r\n})\r\n```\r\n\r\nsrc/pagination.vue\r\n```vue\r\n<template>\r\n    <div>\r\n        <span>Current page: {{ opts.page }}</span>\r\n    </div>\r\n</template>\r\n<script>\r\n    export default {\r\n        data() {\r\n            return {\r\n                opts: this.$root.opts\r\n            }\r\n        }\r\n    }\r\n</script>\r\n```\r\n\r\nIf there's no easier way to do this and you don't think there's the need to simplify this via vue, you may close this feature request."}}
{"actor":{"display_login":"SassNinja"}}