Vue3: Parent Component's data doesn't change after modifying data in vue-document-editor component

[AlanChuang-0710]

Please let me know if I got it wrong. Thank you very much 🙂

Describe the bug I used the demo example(invoiceTemplate). After modifying the invoice_number on the screen, the variable content in Demo.vue does not change.

To Reproduce Steps to reproduce the behavior:

1. Clone the git repo
2. Run npm run serve
3. Open Chrome Vue.js devtool or simply add setInterval in Demo.vue (Continously log content variable)
4. Modify the invoice_number in vue-document-editor component
5. Compare the value from log and screen

Expected behavior Expect data to be reactive between Demo.vue and template

Screenshots

Desktop:

• OS: [Window]
• Browser [Chrome]
• Vue.js version [3]

[motla]

Hi Alan,

Thanks for your interest on the library. To achieve this you would have to use "two-way binding", preferably using v-model. You have to read this page: https://vuejs.org/guide/components/v-model.html

The demo invoice template uses a "contenteditable" \<span> to display invoice_number. It is only for a UI reason, because its width adapts to the content and it is prettier. See the line below: https://github.com/motla/vue-document-editor/blob/559089e01444a8d5a40e6bfe01eebacad4e2d6a8/src/Demo/InvoiceTemplate.ce.vue#L27

We set the content to {{modelValue.invoice_number}} so it initializes the \<span> content to invoice_number. But it is only one-way binding. If you change invoice_number value it will update the content. But for Vue.js the website content is normally not changed by the user so the other way is not implemented.

Unfortunately you can't use v-model on a \<span> so you will have to rewrite the line like this:

<div><b>Invoice number:</b> <input v-model="modelValue.invoice_number"></div>

This way if the user changes the input content, the variable will update accordingly. You can do some CSS to make the \<input> more pretty. Also you can make the input width to match its content, as using contenteditable \<span>, but it involves JavaScript code (there are multiple ways to do it).

I hope that answers your question.