Vueアプリケーションの作成

https://qfmmc.csb.app/

<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>

1.5 KiB Raw Blame History

Vueアプリケーションの作成

1.5 KiB

Raw Blame History