{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/247","labels_url":"https://api.github.com/repos/vuejs/Discussion/issues/247/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/Discussion/issues/247/comments","events_url":"https://api.github.com/repos/vuejs/Discussion/issues/247/events","html_url":"https://github.com/vuejs/Discussion/issues/247","id":94152475,"number":247,"title":"twitter bootstrap modal as component","user":{"login":"PavelPolyakov","id":839290,"avatar_url":"https://avatars.githubusercontent.com/u/839290?v=3","gravatar_id":"","url":"https://api.github.com/users/PavelPolyakov","html_url":"https://github.com/PavelPolyakov","followers_url":"https://api.github.com/users/PavelPolyakov/followers","following_url":"https://api.github.com/users/PavelPolyakov/following{/other_user}","gists_url":"https://api.github.com/users/PavelPolyakov/gists{/gist_id}","starred_url":"https://api.github.com/users/PavelPolyakov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PavelPolyakov/subscriptions","organizations_url":"https://api.github.com/users/PavelPolyakov/orgs","repos_url":"https://api.github.com/users/PavelPolyakov/repos","events_url":"https://api.github.com/users/PavelPolyakov/events{/privacy}","received_events_url":"https://api.github.com/users/PavelPolyakov/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-07-09T21:10:23Z","updated_at":"2015-07-10T10:17:58Z","closed_at":null,"body":"Could someone give me a hint, how can I create a component from the twitter bootstrap modal.\r\n\r\nAssuming that his is the html of the modal:\r\n```html\r\n<div class=\"modal fade\" id=\"addVerb\">\r\n    <div class=\"modal-dialog\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                <h4 class=\"modal-title\">Modal title</h4>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <p>One fine body&hellip;</p>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n                <button type=\"button\" class=\"btn btn-primary\" v-on=\"click: addVerbSave\">Save changes</button>\r\n            </div>\r\n        </div><!-- /.modal-content -->\r\n    </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n```\r\n\r\nWhen I want to achieve:\r\n1. When I click a link, the component is created dynamically. E.g. it's not present in the template of the main component before the modal is initialised.\r\n2. Component can interact with the data of the main component - the one from which it was created.\r\n\r\nWhat I can assume - I should describe a standalone component, like we do usually, let's call it \"modal\".\r\nIf I put the ```<modal prop={{@ parentData}}></modal>``` to the main component template - I would be able to use it.\r\n\r\nBut - how can I do that dynamically? If I want to put/remote the modal component on demand? Should I somehow manipulate with this.$el ??? Where can I read about it?\r\n\r\nAny advice is appreciated.\r\n\r\nRegards,"},"comment":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/comments/120352027","html_url":"https://github.com/vuejs/Discussion/issues/247#issuecomment-120352027","issue_url":"https://api.github.com/repos/vuejs/Discussion/issues/247","id":120352027,"user":{"login":"yyx990803","id":499550,"avatar_url":"https://avatars.githubusercontent.com/u/499550?v=3","gravatar_id":"","url":"https://api.github.com/users/yyx990803","html_url":"https://github.com/yyx990803","followers_url":"https://api.github.com/users/yyx990803/followers","following_url":"https://api.github.com/users/yyx990803/following{/other_user}","gists_url":"https://api.github.com/users/yyx990803/gists{/gist_id}","starred_url":"https://api.github.com/users/yyx990803/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yyx990803/subscriptions","organizations_url":"https://api.github.com/users/yyx990803/orgs","repos_url":"https://api.github.com/users/yyx990803/repos","events_url":"https://api.github.com/users/yyx990803/events{/privacy}","received_events_url":"https://api.github.com/users/yyx990803/received_events","type":"User","site_admin":false},"created_at":"2015-07-10T10:17:58Z","updated_at":"2015-07-10T10:17:58Z","body":"Just add a `v-if`:\r\n\r\n``` html\r\n<modal v-if=\"modalActive\"></modal>\r\n```"}}