在vue3中使用富文本编辑器quill的问题求解

问题遇到的现象和发生背景

想请教一下,我第一次在vue3中使用富文本编辑器quill遇到了一个问题,从数据库读取的数据,在页面点击后,富文本编辑器的文本框只能显示第一次点击的数据,之后点击其他按钮来更换文本框的内容就显示不了对应的数据了,只显示第一次的数据,有朋友能指点指点吗?

问题相关代码,请勿粘贴截图

这是vuecli的package.json添加的依赖

    "@vueup/vue-quill": "alpha"

vue3中的相关代码

 
        <el-table :data="objs" border="true" style="width: 100%">
            <el-table-column fixed prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="公告标题" width="480" />
            <el-table-column prop="time" label="创建时间" width="440" />

            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    
                    <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑el-button>
                    <el-button link type="primary" size="small" @click="handleDelete(scope.row)">删除el-button>
                template>
            el-table-column>
        el-table>


        
        <el-dialog v-model="dialogVisible" title="请填写信息" width="50%">
            
            <el-form :model="form" label-width="120px">
                <el-input type="hidden" id="modal-id" name="modal-id" v-model="entity.id" />
                <el-form-item label="公告标题">
                    <el-input style="width: 650px" v-model="entity.name" />
                el-form-item>

                
                
                
                <QuillEditor id="editorId" ref="myQuillEditor" v-model:content="content" theme="snow" contentType="html"
                    :options="options" />

            el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消el-button>
                    <el-button type="primary" @click="save">保存el-button>
                span>
            template>
        el-dialog>

运行结果及报错内容

运行结果:

img

页面刷新后,点击测试五后弹出的界面及文本框内容是对的,因为每次刷新后的第一次点击都是能显示对应的内容的,再点其他的编辑就不行了,比如再点击测试的编辑,如下:

img

下面文本框里原本应该显示的结果是“测试”

img

我的解答思路和尝试过的方法

用alert方法看过,后端返回的数据是没有问题的,就是前端的富文本编辑器只能显示第一次赋值的值,之后就无法改变了,从前端保存数据也是没问题的,然后就不懂怎么回事了,求解。

监听富文本内容赋值