nebel/hasura-rest-hands-on
1
0
Fork 0
mirror of https://github.com/kou029w/hasura-rest-hands-on.git synced 2025-01-18 08:05:12 +00:00
Code Issues Projects Releases Wiki Activity

update

Browse source
This commit is contained in:
Nebel 2023-03-08 18:57:44 +09:00
parent d5018a8764
commit 5c76d57b16
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/App.vue
View file

@ -15,7 +15,7 @@ window.localStorage.setItem("id", id);
const endpoint = `https://memo-demo.hasura.app/api/rest/page/${id}`; const endpoint = `https://memo-demo.hasura.app/api/rest/page/${id}`;
const content = ref(new Delta([{ insert: "読み込み中…" }])); const content = ref(new Delta([{ insert: "読み込み中…" }]));
const initialContent = new Delta([ const defaultContent = new Delta([
{ insert: "メモ帳\n", attributes: { header: 1 } }, { insert: "メモ帳\n", attributes: { header: 1 } },
{ insert: "こんにちは!\n" }, { insert: "こんにちは!\n" },
{ insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" }, { insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" },
@ -30,11 +30,11 @@ onMounted(async () => {
console.log("endpoint", endpoint); console.log("endpoint", endpoint);
const res = await fetch(endpoint); const res = await fetch(endpoint);
const data = await res.json(); const data = await res.json();
content.value = new Delta(data.page?.content ?? initialContent); content.value = new Delta(data.page?.content ?? defaultContent);
console.log("mounted", data); console.log("mounted", data);
}); });
const update = useDebounceFn(async (content) => { const updateContent = useDebounceFn(async (content) => {
const res = await fetch(endpoint, { const res = await fetch(endpoint, {
method: "PUT", method: "PUT",
body: JSON.stringify({ content }), body: JSON.stringify({ content }),
@ -45,5 +45,9 @@ const update = useDebounceFn(async (content) => {
</script> </script>
<template> <template>
<QuillEditor :content="content" @update:content="update" toolbar="full" /> <QuillEditor
toolbar="full"
:content="content"
@update:content="updateContent"
/>
</template> </template>