记录使用vue-quill-editor时验证必填遇到的问题

vue-quill-editor的使用过程许多博主都写得很详细在这里就不赘述了.主要记录一下我在验证时遇到的问题.先上代码

<el-form :rules="rules" :model="publicityForm">
    <el-form-item label="文章内容" prop="text">
            <quill-editor
              v-model="publicityForm.text"
              :options="publicityForm.editorOption"
              ref="myQuillEditor"
              style="height: 500px;"
            >
            </quill-editor>
     </el-form-item>
</el-form>

export default {
    data() {
       return {
            rules: {
                 text: [
                   { required: true, message: '必填' },
                   { max: 200, message: '请输入200位以内的字符' }
                        ]
            }
       } 
    }
} 

上述实行验证没有问题,但是它有一个问题就是假如我没有填内容就提交表单会弹出提示必填的文字,此时我再在文本框中填写内容,按照预期此时内容已不为空,必填提示文字应当消失.但是提示文字却没有消失,依然显示必填.显然文本框中的值没有被实时进行验证.后来研究了一下quill-editor的事件,添加了change事件,在change事件里面触发验证问题终于得到解决.完整代码如下:

<el-form :rules="rules" :model="publicityForm" ref="publicityForm">
    <el-form-item label="文章内容" prop="text">
            <quill-editor
              v-model="publicityForm.text"
              :options="publicityForm.editorOption"
              ref="myQuillEditor"
              style="height: 500px;"
              @change="changeQuillEditor"
            >
            </quill-editor>
     </el-form-item>
</el-form>

export default {
    data() {
       return {
            rules: {
                 text: [
                   { required: true, message: '必填' },
                   { max: 200, message: '请输入200位以内的字符' }
                        ]
            }
       } 
    },
   methods: {
       changeQuillEditor() {
           this.$refs['publicityForm'].validateField('text');
       }
    } 
}