Change Vue Data with outside JavaScript but page no updating

Hi there,

I’m building a 365 Outlook App in Vue. I’m using Vue with QuillJS. Everything works great.

But, in my Quill component, because of how the app is loading, I need to attach a conventional JavaScript add event listener located in the component.

The event listener listens for the blur where I can check if the user only typed in spaces. If so, it clears the spaces, updates the root.innerHTML of the Quill editor and then changes the values in the Parent’s data. On the blur, the editor gets outlined in red and a warning message appears.

It works great when an empty field - which is also trapped on the :class located on the div.

It’s when the blur occurs. It clears the field, changes the parents’ values but doesn’t show the error message or the red box.

Below is the component code. I really need the blur and it’s awkward in Quill.

Thanks,
Donna

Vue.component('editor', {
    template: '<div ref="editor"></div>',
    props: {
        value: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: "Please type here." //This works
            //default: ''
        }
    },
    data: function data() {
        return {
            editor: null
        };
    },
    mounted: function mounted() {
        var _this = this;
        this.editor = new Quill(this.$refs.editor, {
            modules: {
                keyboard: {
                    bindings: {
                    'tab': {
                      key: 9,
                      handler: function(range, context) {
                        return true;
                      }
                    }
                    }
                },
                toolbar: [['bold', 'italic', 'underline', { 'color': [] }, { 'background': [] }, { 'list': 'bullet' }, 'link', 'clean']]
            },
            theme: 'snow',
            formats: ['bold', 'underline', 'italic', 'color', 'background', 'list', 'link', 'clean']
        });
        this.editor.root.innerHTML = this.value;
        this.editor.root.dataset.placeholder = this.placeholder; 
       
        this.editor.on('text-change', function () {
            return _this.update();
        });

        //The below checks to see if the editors are loaded in the DOM.
        if(document.querySelectorAll(".ql-editor")) {
            var x = document.querySelectorAll(".ql-editor");
            if(x.length > 1) {

                x[0].addEventListener('blur', function () {
                    var lcInput = x[0].innerHTML.replace(/<(.|\n)*?>/g, '').trim();
                    if(lcInput.length === 0) {
                        x[0].innerHTML = '';
                        app.$data.agenda.objective='';
                        app.$data.showErrorObjective = true; //This causes the error message
                    }
                    else {
                        app.$data.showErrorObjective=false;
                    }
                });

                x[1].addEventListener('blur', function () {
                    var lcInput = x[1].innerHTML.replace(/<(.|\n)*?>/g, '').trim();
                    if(lcInput.length === 0) {
                        x[1].innerHTML = '';
                        app.$data.agenda.outcome='';
                        app.$data.showErrorOutcome = true; //This causes the error message
                    }
                    else {
                        app.$data.showErrorOutcome=false;
                    }
                });

                x[0].tabIndex=1;
                x[1].tabIndex=2;
            }
        }
    },
    methods: {
        update: function update() {
            const limit = 1000;
            //console.log(this.editor.getText().length);
            if(this.editor.getLength() > limit){
                this.editor.deleteText(limit, this.editor.getLength());
            }
            this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
        }
    }
});