Nuxt3中Vue-Quill编辑器提交后无法清空内容的问题求助

我在Nuxt 3项目中把vue-quill封装成独立组件，功能运行正常，但发送POST请求提交内容后，编辑器依然显示原有内容。尝试调用setContents([])清空内容，却没有效果，求解决方法。

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>

页面使用代码（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([]) // 尝试清空内容，但无效

    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>

解决方法 #

核心问题 #

你直接调用editor.value.setContents([])无效，是因为editor.value是封装的AppEditor组件实例，不是内部的QuillEditor原生实例，没法直接调用Quill的方法。另外，虽然你设置了message.value = ''，但组件内的编辑器可能因为响应式同步问题没跟上。

具体修复步骤 #

1. 在AppEditor组件中暴露清空方法

修改AppEditor.vue，添加清空逻辑并暴露给父组件：

<script setup>
// ... 原有代码

// 新增清空编辑器的方法
const clearEditor = () => {
  if (editor.value) {
    // 因为设置了content-type为html，直接设为空字符串即可
    editor.value.setHTML('')
    // 同步更新父组件的modelValue
    emit('update:modelValue', '')
  }
}

// 把方法暴露给父组件调用
defineExpose({
  clearEditor
})

// ... 原有代码
</script>

2. 在父组件中调用暴露的清空方法

修改TaskComment里的postComment函数，替换原来无效的清空代码：

const postComment = async () => {
  // ... 原有代码

  loading.value = false
  // 不用手动设置message.value = ''，clearEditor会自动同步
  editor.value.clearEditor() // 调用组件暴露的清空方法

  currentPage.value = 1
  getComments()

  // ... 原有代码
}

可选优化：确保props更新同步到编辑器

如果希望父组件的message变化能实时同步到编辑器，可以在AppEditor中添加监听：

<script setup>
// ... 原有代码

watch(() => props.modelValue, (newVal) => {
  if (editor.value) {
    editor.value.setHTML(newVal)
  }
}, { immediate: true })

// ... 原有代码
</script>

这样修改后，提交后就能正确清空编辑器内容，同时同步父组件的绑定值。

内容的提问来源于stack exchange，提问作者claudios