How To Update Parent V-model Using Child Components' Prop?

My parent component has the following child component: My parent component has the following data: data () { ret

Solution 1:

You need to make sure that whenever the <editor> component updates the editorBody value, it does not assign to the prop directly because this is not allowed (props are one-way from parent to child), instead it needs to emit an event with the new value.

The convention is to emit an event named update:editorBody with the new value. Then the parent component can listen for that event and update formData.englishBody in response to that event:

<editor
  :editorBody="formData.englishBody"
  @update:editorBody="formData.englishBody = $event"
>

This can be simplified to just:

<editor :editorBody.sync="formData.englishBody">

This is a special two-way binding.

Remember, <editor> must be emitting the update:editorBody event! This means you cannot use v-model="editorBody" inside the <editor> component template.

In your <editor> component, change this:

<q-editor v-model="editorBody">

to this (assuming <q-editor>didn't customize v-model):

<q-editor
  :value="editorBody"
  @input="$emit('update:editorBody', $event)"
>

Consult the docs for a more in-depth explanation and examples.