javascript - How to update parent v-model using child components' prop?

Question

My parent component has the following child component:

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

My parent component has the following data:

data () {
  return {
    // allContent: null,
    formData: {
      englishTitle: '',
      nepaliTitle: '',
      englishBody: '',
      nepaliBody: '',
      activeInactive: false,
      userId: null
    },
    rowId: null
  }
}

My child component has its own v-model, I am feeding props from parent to the child components v-model.

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

The formData.englishBody is a parent component data. I want to update formData.englishBody using the editor child component. editor child component is a textarea. Basically, I want to link child's v-model to parents data.

Answer 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.