{"action":"created","issue":{"url":"https://api.github.com/repos/GIVESocialMovement/sbt-vuefy/issues/10","repository_url":"https://api.github.com/repos/GIVESocialMovement/sbt-vuefy","labels_url":"https://api.github.com/repos/GIVESocialMovement/sbt-vuefy/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/GIVESocialMovement/sbt-vuefy/issues/10/comments","events_url":"https://api.github.com/repos/GIVESocialMovement/sbt-vuefy/issues/10/events","html_url":"https://github.com/GIVESocialMovement/sbt-vuefy/issues/10","id":341301767,"node_id":"MDU6SXNzdWUzNDEzMDE3Njc=","number":10,"title":"Components lose reactivity with sbt-vuefy","user":{"login":"nirslsk","id":2808762,"node_id":"MDQ6VXNlcjI4MDg3NjI=","avatar_url":"https://avatars0.githubusercontent.com/u/2808762?v=4","gravatar_id":"","url":"https://api.github.com/users/nirslsk","html_url":"https://github.com/nirslsk","followers_url":"https://api.github.com/users/nirslsk/followers","following_url":"https://api.github.com/users/nirslsk/following{/other_user}","gists_url":"https://api.github.com/users/nirslsk/gists{/gist_id}","starred_url":"https://api.github.com/users/nirslsk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nirslsk/subscriptions","organizations_url":"https://api.github.com/users/nirslsk/orgs","repos_url":"https://api.github.com/users/nirslsk/repos","events_url":"https://api.github.com/users/nirslsk/events{/privacy}","received_events_url":"https://api.github.com/users/nirslsk/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-15T08:00:45Z","updated_at":"2018-07-16T02:55:57Z","closed_at":null,"author_association":"NONE","body":"Thanks so much for making this! I'm very excited about the possibility of using sbt-vuefy to create single-page components instead of having them in template files. It took me a while to figure out how to set it up. The library dependency for sbt-vuefy doesn't seem to resolve on Play 2.5 so I had to upgrade to Play 2.6, and since I'm completely unfamiliar with npm and webpack, I didn't realize I was supposed to copy package.json from the test project to my own project and run npm install.\r\n\r\nI only have one (recursive) Vue component right now for displaying threaded comments, and it works great in the template, but when I move it to a .vue file, even though it compiles just fine and the comment tree displays initially, a lot of the reactivity is gone. In link-comment.vue, I define these props:\r\n\r\n```\r\n        props: {\r\n            comment: { type: Object, required: true },\r\n            commentArray: { type: Array, required: true },\r\n        }\r\n\r\n```\r\nAnd instantiate thusly: \r\n\r\n```\r\n        <link-comment v-for=\"childComment in comment.replies\"\r\n                      :key=\"childComment.commentId\"\r\n                      :comment=\"childComment\"\r\n                      :comment-array=\"comment.replies\"></link-comment>\r\n\r\n```\r\n\r\nAll of the reactive data is really in the **comment** prop, which is an object that has various attributes, example json:\r\n\r\n```\r\n{\r\n   commentId: 368,\r\n   userName: \"Kirk Avocado\",\r\n   commentText: \"The universe was a mistake.\",\r\n   likeCount: 1,\r\n   liked: false,\r\n   ownComment: true,\r\n   replies: [...]\r\n}\r\n\r\n```\r\nThese two methods for example, change **comment.liked**, **comment.likeCount**, and the **comment.replies** array, and I can verify in the browser debugger that the object data changes and stays changed, but none of the changes are rendered:\r\n\r\n```\r\ntoggleLike: function() {\r\n                let comment = this.comment;\r\n\r\n                $.ajax({\r\n                    method: 'POST',\r\n                    url: comment.liked ? '/api/unlike_link_comment' : '/api/like_link_comment',\r\n                    contentType: \"application/json; charset=utf-8\",\r\n                    data: JSON.stringify({ commentId: comment.commentId }),\r\n                    dataType: 'json',\r\n                    success: function (response) {\r\n                        if (comment.liked) {\r\n                            comment.liked = false;\r\n                            comment.likeCount--;\r\n                        } else {\r\n                            comment.liked = true;\r\n                            comment.likeCount++;\r\n                        }\r\n                    },\r\n                    error: function (req, status, error) {\r\n                    }\r\n                });\r\n            },\r\n            deleteComment: function() {\r\n                let data = this;\r\n\r\n                if (confirm('Delete your comment?')) {\r\n                    $.ajax({\r\n                        method: 'POST',\r\n                        url: '/api/delete_link_comment',\r\n                        contentType: \"application/json; charset=utf-8\",\r\n                        data: JSON.stringify({\r\n                            commentId: data.comment.commentId\r\n                        }),\r\n                        dataType: 'json',\r\n                        success: function () {\r\n                            data.commentArray.splice(data.commentArray.indexOf(data.comment), 1);\r\n                        },\r\n                        error: function (req, status, error) {\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n```\r\n\r\nWeirdly other changes like editing a comment (which changes **comment.commentText**) or adding a reply (which modifies the **comment.replies** array) do render. There's no rhyme or reason to it.\r\n\r\nI realize this seems more like a VueJS problem, but it all works when the components are in the template, so I'm wondering is something is lost along the way when the .vue file is compiled that breaks reactivity...\r\n\r\nI'm happy to send you the entire .vue file and complete JSON data to initialize it with if you deem it necessary.\r\n\r\nThanks, Nir\r\n"},"comment":{"url":"https://api.github.com/repos/GIVESocialMovement/sbt-vuefy/issues/comments/405139496","html_url":"https://github.com/GIVESocialMovement/sbt-vuefy/issues/10#issuecomment-405139496","issue_url":"https://api.github.com/repos/GIVESocialMovement/sbt-vuefy/issues/10","id":405139496,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNTEzOTQ5Ng==","user":{"login":"tanin47","id":494417,"node_id":"MDQ6VXNlcjQ5NDQxNw==","avatar_url":"https://avatars2.githubusercontent.com/u/494417?v=4","gravatar_id":"","url":"https://api.github.com/users/tanin47","html_url":"https://github.com/tanin47","followers_url":"https://api.github.com/users/tanin47/followers","following_url":"https://api.github.com/users/tanin47/following{/other_user}","gists_url":"https://api.github.com/users/tanin47/gists{/gist_id}","starred_url":"https://api.github.com/users/tanin47/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tanin47/subscriptions","organizations_url":"https://api.github.com/users/tanin47/orgs","repos_url":"https://api.github.com/users/tanin47/repos","events_url":"https://api.github.com/users/tanin47/events{/privacy}","received_events_url":"https://api.github.com/users/tanin47/received_events","type":"User","site_admin":false},"created_at":"2018-07-16T02:55:57Z","updated_at":"2018-07-16T02:55:57Z","author_association":"CONTRIBUTOR","body":"Yeah, that's strange. I remember a somewhat similar problem which seems to be related to the fact that we cannot change props (or, technically, it gets overwritten).\r\n\r\nI wonder if you could try:\r\n\r\n```\r\nprops: {\r\n  comment: { type: Object, required: true },\r\n  commentArray: { type: Array, required: true },\r\n},\r\ndata: function() {\r\n  return {\r\n    mutableComment: this.comment\r\n  };\r\n}\r\n\r\n// and use mutableComment every where instead.\r\n```\r\n\r\nLet's keep `commentArray` the same for now to see if this fixes the problem with `comment.liked` and `comment.likeCount`.\r\n\r\nThank you for trying sbt-vuefy and for the feedback. I'll improve the README accordingly.\r\n\r\nAlso, if you can put the code in the repo and share it with me, that would be great. Please let me know if using `data` works."}}
{"actor":{"display_login":"tanin47"}}