Question: Why does the editor not reset when i reset test from v-model:content="test"

The editor doesn’t change when it’s v-model variable changes. Why is that?

So testReset() does nothing visual in this example.

Code:

<QuillEditor
        :id="name"
        v-model:content="test"
        :name="name"
        theme="bubble"
        toolbar="essential"
        content-type="html"
></QuillEditor>

<button @click="testReset()">reset</button>

data: {
  return {
    test: ""
  }
}

methods: {
    testReset() {
      console.log(this.test);
      this.test = "resetted";
    },
}

[ttntm]

I encountered a similar issue yesterday. Needed to update the displayed editor content after fetching new data.

Didn’t get it to work until I put the editor right into the component fetching the data (so there’s no events in between), attached v-model:content to the correct key in my editable object (created by reactive()) and used setHTML() once (= 1 time) after the updated data came in.

No cursor issues that way; I also encountered them when working with the editor in its own compenent, using props/emit() to communicate with the parent.

PS: setHTML() needs a ref() when using Composition API, just in case that’s what you were asking @marzz17. So, if you do this

const editor = ref()
...
<QuillEditor ref="editor" ... />

then you can use editor.value.setHTML(yourHTML) anywhere in your setup() or <script setup>.

[ttntm]

Sure @bulich - line 104 in this component here: https://github.com/ttntm/recept0r-ts/blob/main/src/views/RecipeEditable.vue

Haven’t had any issues using it this way since posting my initial comment.