記錄使用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'); }, 
    } 
}