{"action":"closed","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/7916","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/7916/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/7916/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/7916/events","html_url":"https://github.com/vuejs/vue/issues/7916","id":309547358,"number":7916,"title":"Vuejs deffered component misbehaves","user":{"login":"McKabue","id":6072072,"avatar_url":"https://avatars0.githubusercontent.com/u/6072072?v=4","gravatar_id":"","url":"https://api.github.com/users/McKabue","html_url":"https://github.com/McKabue","followers_url":"https://api.github.com/users/McKabue/followers","following_url":"https://api.github.com/users/McKabue/following{/other_user}","gists_url":"https://api.github.com/users/McKabue/gists{/gist_id}","starred_url":"https://api.github.com/users/McKabue/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/McKabue/subscriptions","organizations_url":"https://api.github.com/users/McKabue/orgs","repos_url":"https://api.github.com/users/McKabue/repos","events_url":"https://api.github.com/users/McKabue/events{/privacy}","received_events_url":"https://api.github.com/users/McKabue/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-03-28T21:59:50Z","updated_at":"2018-03-28T21:59:51Z","closed_at":"2018-03-28T21:59:51Z","author_association":"NONE","body":"i have created a component loader, between it gets a deferred component, it re-renders infinitely: here are two jsfiddles:\r\n\r\n## [working as expected][1]\r\n\r\n<!-- begin snippet: js hide: false console: true babel: false -->\r\n\r\n<!-- language: lang-js -->\r\n\r\n     Vue.component('create', Vue.extend({\r\n            template: '<h1>HEADER</h1>'\r\n        }));\r\n\r\n    Vue.component('component-loader', function (resolve) {\r\n            var model = Vue.extend({\r\n                props: ['name'],\r\n                watch: {\r\n                    name: function (newValue, oldValue) {\r\n                       alert(newValue);\r\n                    }\r\n                },\r\n                render: function (createElement) {\r\n                    var self = this;\r\n                    alert(self.name);\r\n                    var m = function (resolve) {\r\n                            resolve({\r\n                                template: '<component is=\"' + self.name + '\"></component>'\r\n                            });\r\n                    };\r\n\r\n                    return createElement(m);\r\n                }\r\n            });\r\n            resolve(model);\r\n        });\r\n        \r\n        \r\n        var viewModel = new Vue({});\r\n\r\n        viewModel.$mount('#app');\r\n\r\n<!-- language: lang-html -->\r\n\r\n    <script type=\"text/javascript\" src=\"//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js\"></script>\r\n\r\n    <div id=\"app\">\r\n    <component-loader name=\"create\"></component-loader>\r\n    </div>\r\n\r\n<!-- end snippet -->\r\n\r\n## [Not working][2]\r\nthis fiddle will fire after every **5 seconds**. it does also not render the component as the first one\r\n\r\n<!-- begin snippet: js hide: false console: true babel: false -->\r\n\r\n<!-- language: lang-js -->\r\n\r\n     Vue.component('create', Vue.extend({\r\n            template: '<h1>HEADER</h1>'\r\n        }));\r\n\r\n    Vue.component('component-loader', function (resolve) {\r\n            var model = Vue.extend({\r\n                props: ['name'],\r\n                watch: {\r\n                    name: function (newValue, oldValue) {\r\n                       alert(newValue);\r\n                    }\r\n                },\r\n                render: function (createElement) {\r\n                    var self = this;\r\n                    alert(self.name);\r\n                    var m = function (resolve) {\r\n                        setTimeout(function () {\r\n                            resolve({\r\n                                template: '<component is=\"' + self.name + '\"></component>'\r\n                            });\r\n                        }, 5000);\r\n                    };\r\n\r\n                    return createElement(m);\r\n                }\r\n            });\r\n            resolve(model);\r\n        });\r\n        \r\n        \r\n        var viewModel = new Vue({});\r\n\r\n        viewModel.$mount('#app');\r\n\r\n<!-- language: lang-html -->\r\n\r\n\r\n    <script type=\"text/javascript\" src=\"//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js\"></script>\r\n\r\n    <div id=\"app\">\r\n    <component-loader name=\"create\"></component-loader>\r\n    </div>\r\n\r\n<!-- end snippet -->\r\n\r\nwhat could be the problem? the component loader creates a dynamic component and renders it by name...\r\n\r\n  [1]: https://jsfiddle.net/mckabue/L90p565e/5/\r\n  [2]: https://jsfiddle.net/mckabue/L90p565e/6/"}}
{"actor":{"display_login":"vue-issue-bot"}}