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