{"action":"opened","issue":{"url":"https://api.github.com/repos/sveltejs/sapper/issues/524","repository_url":"https://api.github.com/repos/sveltejs/sapper","labels_url":"https://api.github.com/repos/sveltejs/sapper/issues/524/labels{/name}","comments_url":"https://api.github.com/repos/sveltejs/sapper/issues/524/comments","events_url":"https://api.github.com/repos/sveltejs/sapper/issues/524/events","html_url":"https://github.com/sveltejs/sapper/issues/524","id":386451827,"node_id":"MDU6SXNzdWUzODY0NTE4Mjc=","number":524,"title":"Updating the UI","user":{"login":"knipferrc","id":5757096,"node_id":"MDQ6VXNlcjU3NTcwOTY=","avatar_url":"https://avatars2.githubusercontent.com/u/5757096?v=4","gravatar_id":"","url":"https://api.github.com/users/knipferrc","html_url":"https://github.com/knipferrc","followers_url":"https://api.github.com/users/knipferrc/followers","following_url":"https://api.github.com/users/knipferrc/following{/other_user}","gists_url":"https://api.github.com/users/knipferrc/gists{/gist_id}","starred_url":"https://api.github.com/users/knipferrc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/knipferrc/subscriptions","organizations_url":"https://api.github.com/users/knipferrc/orgs","repos_url":"https://api.github.com/users/knipferrc/repos","events_url":"https://api.github.com/users/knipferrc/events{/privacy}","received_events_url":"https://api.github.com/users/knipferrc/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-12-01T11:57:10Z","updated_at":"2018-12-01T11:57:10Z","closed_at":null,"author_association":"NONE","body":"Building out an app with Sapper and digging it so far. Not real sure how to go about updating the UI right on:click.\r\n\r\n``` js\r\n<div class=\"p-4\">\r\n  <h1 class=\"mb-4\">{data.todoDetail.title}</h1>\r\n  <h3 class=\"text-dark\">{data.todoDetail.description}</h3>\r\n</div>\r\n<div class=\"flex flex-row flex-wrap\">\r\n  {#each data.todoDetail.todos as todo}\r\n  <div\r\n    class=\"bg-grey-lighter shadow rounded w-full sm:w-full md:w-1/4 lg:w-1/5 m-2 sm:m-2 lg:m-4 p-4 flex-grow\"\r\n    on:click=\"updateStatus(params.slug, todo.id, todo.completed)\"\r\n  >\r\n    <div class=\"flex justify-between items-center\">\r\n      <div class=\"flex flex-col\">\r\n        <div class=\"text-xl font-bold\">{todo.name}</div>\r\n        <div>{todo.description}</div>\r\n      </div>\r\n      <i\r\n        class=\"material-icons {todo.completed ? 'text-green' : 'text-grey-darker'}\"\r\n      >\r\n        check_circle\r\n      </i>\r\n    </div>\r\n  </div>\r\n  {/each}\r\n</div>\r\n\r\n<script>\r\n  import * as api from '../../utils/api'\r\n\r\n  export default {\r\n    async preload({ params, query }) {\r\n      const res = await this.fetch(`todos/${params.slug}.json`)\r\n      const data = await res.json()\r\n\r\n      if (res.status === 200) {\r\n        return { data }\r\n      } else {\r\n        this.error(res.status, data.message)\r\n      }\r\n    },\r\n    methods: {\r\n      async updateStatus(id, currentTodo, status) {\r\n        await api.post(`todos/${id}.json`, { currentTodo, status })\r\n        await api.get(`todos/${id}.json`)\r\n      }\r\n    }\r\n  }\r\n</script>\r\n```\r\n\r\nThe entire repo is here: https://github.com/knipferrc/plate\r\n\r\nBut what I wanna do is on click, toggle the status field and update the UI right away with the changes, I do the post and then call the get again but it is not reflected in the UI. Any help is appreciated."}}
{"actor":{"display_login":"knipferrc"}}