v-model doesn't react to new data after initalization

[TylerMills]

This is a pretty weird issue I'm seeing. I have a page of Quill objects all mapped to an object chx which contains a value notes:

notes = {
            twitter: {ops:[]},
            facebook: {ops:[]},
            instagram: {ops:[]}
        };

My HTML looks like the following:

<quill v-model="notes.instagram" class="editor" :config="notesConfiguration"></quill>

On page load I get the most recent configuration from local storage and update the nested objects above. Quill updates the editor perfectly.

However, when a user updates the objects via an "open" dialogue I can see the underlying object be logged out to the console, but the editor does not update. If I add new data into the Quill editor and save (which just updates the notes object above), the next page load will load these new changes but not any previous saves (even though the my console.log statements show that it is changing).

Any idea of what could cause this intermittent behavior? It doesn't seem to happen in any of the other components I have. But I'm also relatively new to Vue.js so I could be missing something basic.

I'm using Vue 2 and the latest version of this library.

[BrockReece]

Hi @TylerMills

Thanks for raising this issue. There is nothing in the current component that is reacting to the change.

We do have hooks if you have an event bus setup but I added this feature when I migrated this to Vue 2 and realise how silly that is now.

Proposal:

Would it work for you if I set up an event listener that can be called from the parent...

this.$refs.quill.$emit('set-html', $new-content)
// or depending on your output requirements...
this.$refs.quill.$emit('set-content', $new-content)

Cheers Brock

[TylerMills]

Hi @BrockReece, I haven't used that kind of workflow before but it might work. Would the event set-content be called in the parent constructor?

[BrockReece]

set-content will be called from the parent and trigger a method within the quill component and update the contents to the value of the second argument.

Unfortunately using the standard v-model workflow doesn't work very well in this use case, it either causes loops or becomes quite expensive to diff every time there is a change to the quill editor.

[TylerMills]

I understand the reasons not to, I could see updating the v-model on selection change instead of each keypress might be less expensive. Either one would be great! This has been a very helpful component.

[BrockReece]

Thanks, glad you are finding it helpful This has been addressed in the latest release

[BrockReece]

Yep, just updated release notes, sorry.