美文网首页前端的零零碎碎
记录 Vue Tinymce 在 Dialog 中不更新视图问题

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

作者: 一个儿子叫Python的前端 | 来源:发表于2021-03-15 17:07 被阅读0次

    场景是这样的,一个列表,项目每行会有一个退回按钮,退回按钮会嵌入一个 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>
    

    相关文章

      网友评论

        本文标题:记录 Vue Tinymce 在 Dialog 中不更新视图问题

        本文链接:https://www.haomeiwen.com/subject/kbnkcltx.html