{"action":"created","issue":{"url":"https://api.github.com/repos/storybooks/storybook/issues/4947","repository_url":"https://api.github.com/repos/storybooks/storybook","labels_url":"https://api.github.com/repos/storybooks/storybook/issues/4947/labels{/name}","comments_url":"https://api.github.com/repos/storybooks/storybook/issues/4947/comments","events_url":"https://api.github.com/repos/storybooks/storybook/issues/4947/events","html_url":"https://github.com/storybooks/storybook/issues/4947","id":388492489,"node_id":"MDU6SXNzdWUzODg0OTI0ODk=","number":4947,"title":"addon-knobs not working with vue from v4.0.8","user":{"login":"samit4me","id":3248531,"node_id":"MDQ6VXNlcjMyNDg1MzE=","avatar_url":"https://avatars3.githubusercontent.com/u/3248531?v=4","gravatar_id":"","url":"https://api.github.com/users/samit4me","html_url":"https://github.com/samit4me","followers_url":"https://api.github.com/users/samit4me/followers","following_url":"https://api.github.com/users/samit4me/following{/other_user}","gists_url":"https://api.github.com/users/samit4me/gists{/gist_id}","starred_url":"https://api.github.com/users/samit4me/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samit4me/subscriptions","organizations_url":"https://api.github.com/users/samit4me/orgs","repos_url":"https://api.github.com/users/samit4me/repos","events_url":"https://api.github.com/users/samit4me/events{/privacy}","received_events_url":"https://api.github.com/users/samit4me/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":13,"created_at":"2018-12-07T03:34:56Z","updated_at":"2019-01-03T21:13:21Z","closed_at":null,"author_association":"NONE","body":"Upgraded from 4.0.4 to 4.0.12 and knobs were no longer visible or working. Tested each version and 4.0.7 works but 4.0.8 does not. I assume it's something to do with #4773.\r\n\r\nTypical use of knobs looks something like this (if that helps):\r\n```\r\ntemplate: '<simple-knob-example :age=\"age\" />',\r\ndata: () => ({\r\n  age: 40,\r\n}),\r\n```\r\n\r\nI don't see any error messages or anything, but if there is anything else I can do to help please let us know.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/storybooks/storybook/issues/comments/451278991","html_url":"https://github.com/storybooks/storybook/issues/4947#issuecomment-451278991","issue_url":"https://api.github.com/repos/storybooks/storybook/issues/4947","id":451278991,"node_id":"MDEyOklzc3VlQ29tbWVudDQ1MTI3ODk5MQ==","user":{"login":"samit4me","id":3248531,"node_id":"MDQ6VXNlcjMyNDg1MzE=","avatar_url":"https://avatars3.githubusercontent.com/u/3248531?v=4","gravatar_id":"","url":"https://api.github.com/users/samit4me","html_url":"https://github.com/samit4me","followers_url":"https://api.github.com/users/samit4me/followers","following_url":"https://api.github.com/users/samit4me/following{/other_user}","gists_url":"https://api.github.com/users/samit4me/gists{/gist_id}","starred_url":"https://api.github.com/users/samit4me/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samit4me/subscriptions","organizations_url":"https://api.github.com/users/samit4me/orgs","repos_url":"https://api.github.com/users/samit4me/repos","events_url":"https://api.github.com/users/samit4me/events{/privacy}","received_events_url":"https://api.github.com/users/samit4me/received_events","type":"User","site_admin":false},"created_at":"2019-01-03T21:13:21Z","updated_at":"2019-01-03T21:13:21Z","author_association":"NONE","body":"Awesome, thanks for the reply @backbone87.\r\n\r\nSo on v4.0.7 using `data` my stories work as expected. After trying the suggestions I am still having issues. Below is a list of what I've tried and there outcomes:\r\n\r\n- Converted `data` over to `props` and this works on v4.0.7.\r\n- Updated to latest stable version v4.1.4, things build and the knobs are visible but they do not work (e.g. changing a knob value does not update the component).\r\n- Rolled back to v4.0.8 and same issue as v4.1.4, so something definitely changed in that version.\r\n- After this I then updated to latest alpha v4.2.0-alpha.8 and got to following error.\r\n\r\n```\r\nError: `template` or `render` must be on component options, but got undefined.\r\n    at parseStoryComponent (http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:83068:15)\r\n    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:84339:18\r\n    at VueInfoAddon (http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:84398:33)\r\n    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21309:28\r\n    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21310:17\r\n    at wrapper (http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:8808:12)\r\n    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:12649:16\r\n    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:12661:32\r\n    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21309:28\r\n    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21310:17\r\n```\r\n\r\nThe story I have been testing is super basic and looks a little like the following:\r\n\r\n```\r\n...\r\n\r\nstoriesOf(__filenamespace, module)\r\n  .addDecorator(VueInfoAddon)\r\n  .addDecorator(withKnobs)\r\n  .add('MyStoryName', () => ({\r\n    components: { MyIconComponent },\r\n    props: {\r\n      animate: { type: Boolean, default: boolean('animate', true) },\r\n      disabled: { type: Boolean, default: boolean('disabled', true) },\r\n      color: { type: String, default: select('color', ['', 'red', 'green', 'blue']) },\r\n    },\r\n    template: `\r\n      <MyIconComponent\r\n        :animate=\"animate\"\r\n        :disabled=\"disabled\"\r\n        :color=\"color\"\r\n      />\r\n    `,\r\n    // data: () => ({\r\n    //   animate: boolean('animate', true),\r\n    //   disabled: boolean('disabled', true),\r\n    //   color: select('color', ['', 'red', 'green', 'blue']),\r\n    // }),\r\n    propsDescription: {\r\n      animate: 'Animate if true.',\r\n      disabled: 'Show as disabled (grey).',\r\n      color: 'Color of the icon.',\r\n    },\r\n  }));\r\n```\r\n\r\nIf there is anything else I can do to help, please let me know, cheers 🍻 "}}
{"actor":{"display_login":"samit4me"}}