记录 Vue Tinymce 在 Dialog 中不更新视图问题

场景是这样的,一个列表,项目每行会有一个退回按钮,退回按钮会嵌入一个 Tinymce 富文本组件,可是发现点击不同项目的退回两次以后,富文本框里面的内容开始不更新。

一开始以为是 vue 自己的坑,尝试强制使用了 this.$set 来更新视图不行,后面又试了下 watch 监听的方法也不太行。
后面灵机一动,想着是不是组件的问题,发现 Tinymce 只渲染了一次,所以造成数据有点问题。所以解决的方法就是利用 v-if 的方法,利用弹窗的显隐判断组件的渲染。

下面是代码:

 <el-dialog title="退回原因" :visible.sync="dialogVisible" width="500">
            <Tinymce
                ref="editor"
                v-model="ruleForm.return_reason"
                v-if="dialogVisible"
                :height="400"
            />
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitReason"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容