{"action":"opened","issue":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/402","labels_url":"https://api.github.com/repos/vuejs/Discussion/issues/402/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/Discussion/issues/402/comments","events_url":"https://api.github.com/repos/vuejs/Discussion/issues/402/events","html_url":"https://github.com/vuejs/Discussion/issues/402","id":106828869,"number":402,"title":"component doesn't seem to support computed properties","user":{"login":"lilchow","id":8870452,"avatar_url":"https://avatars.githubusercontent.com/u/8870452?v=3","gravatar_id":"","url":"https://api.github.com/users/lilchow","html_url":"https://github.com/lilchow","followers_url":"https://api.github.com/users/lilchow/followers","following_url":"https://api.github.com/users/lilchow/following{/other_user}","gists_url":"https://api.github.com/users/lilchow/gists{/gist_id}","starred_url":"https://api.github.com/users/lilchow/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lilchow/subscriptions","organizations_url":"https://api.github.com/users/lilchow/orgs","repos_url":"https://api.github.com/users/lilchow/repos","events_url":"https://api.github.com/users/lilchow/events{/privacy}","received_events_url":"https://api.github.com/users/lilchow/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-09-16T18:10:51Z","updated_at":"2015-09-16T18:10:51Z","closed_at":null,"body":"I created a simple component:\r\n```\r\nVue.component('picframe', {\r\n\tprops: ['name', 'width', 'x', 'y'], //width is in pixel\r\n\tdata: function () {\r\n\t\treturn {\r\n\t\t\tname: null,\r\n\t\t\twidth: null,\r\n\t\t\tx: null,\r\n\t\t\ty: null\r\n\t\t}\r\n\t},\r\n\tcomputed:function(){\r\n\t\treturn {\r\n\t\t\tleft:function(){\r\n\t\t\t\treturn this.x*100+'%';\r\n\t\t\t},\r\n\t\t\ttop:function(){\r\n\t\t\t\treturn this.y*100+'%';\r\n\t\t\t},\r\n\t\t\tframe:function(){\r\n\t\t\t\treturn this.$parent.textureAtlas.frames[this.name];\r\n\t\t\t},\r\n\t\t\tscalar:function(){\r\n\t\t\t\treturn this.width/this.frame.w+'px';\r\n\t\t\t},\r\n\t\t\theight:function(){\r\n\t\t\t\treturn this.scalar*this.frame.h+'px';\r\n\t\t\t}\r\n\t\t}\t\r\n\t},\r\n\ttemplate: '<span style=\"display:block !important;\">{{name}}{{left}}{{frame}}</span>',\r\n\tcreated:function(){\r\n\t\tconsole.log('pic frame created',this.$parent.textureAtlas);\r\n\t}\r\n});\r\n```\r\nAnd then i used this component in my html file: `<picframe name=\"celeb1\" width=\"200\" x=\"100\" y=\"300\"></picframe>`. When the page was rendered, only {{name}} was interpolated. Neither {{frame}} nor {{left}} was rendered at all. This is what the eventual html looks like `<span style=\"display:block !important;\">celeb1</span>`. Note that name was defined in the data property but frame and left were defined as computed properties. Please advise. Thanks!\r\n\r\n"}}