mirror of
https://github.com/kou029w/hasura-rest-hands-on.git
synced 2025-01-18 16:08:14 +00:00
48 lines
1.5 KiB
Markdown
48 lines
1.5 KiB
Markdown
|
# Vueアプリケーションの作成
|
||
|
|
|
||
|
|
https://qfmmc.csb.app/
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<QuillEditor
|
||
|
|
ref="editor"
|
||
|
|
:content="{ ops: [{ insert: '読み込み中…' }] }"
|
||
|
|
@update:content="update"
|
||
|
|
toolbar="full"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { QuillEditor } from "@vueup/vue-quill";
|
||
|
|
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||
|
|
import axios from "axios";
|
||
|
|
import _ from "lodash";
|
||
|
|
|
||
|
|
/** ここに先ほど作成したREST APIエンドポイントを指定します */
|
||
|
|
const endpoint = "https://memo-demo.hasura.app/api/rest/page/1";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "App",
|
||
|
|
components: { QuillEditor },
|
||
|
|
beforeMount() {
|
||
|
|
this.update = _.debounce(async (content) => {
|
||
|
|
await axios.put(endpoint, { content });
|
||
|
|
console.debug("updated", content);
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
const res = await axios.get(endpoint);
|
||
|
|
const content = res.data.page?.content;
|
||
|
|
this.$refs.editor.setContents(content);
|
||
|
|
console.debug("content", content);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|