Clearing quill editor after submit

Question

I am using vue-quill on my nuxt 3 project. I wrapped it inside a component and all is working fine but after a post request, editor still displays the content.

AppEditor

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  taskId: {
    type: Number,
    default: null,
  },
  initialContent: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  taskmembers: {
    type: Array,
    required: true,
  },
})

const emit = defineEmits(['update:modelValue', 'on-editor-ready'])
const editor = ref()

const toolbar = [
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['link', 'image'],
  ['clean'],
]

const onUpdate = () => {
  const content = editor.value.getHTML()
  emit('update:modelValue', content)
}

const onEditorReady = (event) => {
  emit('on-editor-ready', event)
}

</script>

<template>
  <div>
    <QuillEditor
      ref="editor"
      theme="snow"
      :toolbar="toolbar"
      content-type="html"
      :content="props.modelValue"
      placeholder="Say something..."
      @ready="onEditorReady"
      @update:content="onUpdate"
    />
  </div>
</template>

and on my page I use it like below

TaskComment

<script setup>
import AppEditor from '@/components/AppEditor.vue'

const postComment = async () => {
  const task = props.taskId
  const url = `/tasks/${task}/comments`

  loading.value = true

  try {
    await useBaseFetch(url, {
      method: 'POST',
      body: JSON.stringify({
        comment: message.value,
      }),
    })

    loading.value = false
    message.value = ''

    editor.value.setContents([]) //trying to clear the content

    currentPage.value = 1
    getComments()
  } catch (error) {
    loading.value = false
    if (error.response && error.response.status === 422) {
      console.log('error', error)
    } else {
      errorMsg.value = 'An error occured.'
    }
  }
}

</script>

<template>
  <Form @submit="onSubmit">
     <AppEditor ref="editor" v-model="message" :taskmembers="members" :task-id="props.taskId" />
       <span v-if="errorMessage && meta.touched" class="text-red-500 text-sm normal-case">{{ errorMessage }}</span>
          <div class="flex gap-2 mt-4">
            <ElementsAppButton size="small" type="submit" :loading="loading">
              Save
            </ElementsAppButton>
          </div>
  </Form>
</template>

Answer 1

vue-quill doesn't seem to like the empty string in message.value = ''.

Instead, you can set it to an empty paragraph <p></p> or <p><br></p>, which is what quill uses as empty value:

message.value = '<p></p>'

Here it is in a playground