VueJS V-bind:sync="{object}" -- 在父节点中观察子节点发出的数据

Question

I am writing an app in which I have a parent component that passes an Object, this.form to a child form component via v-bind:sync="form" , with the child form emitting values for each of the keys of the parent on @input.

I want to watch the value of this.form in the parent, but it seems the object on the parent is not reactive in the case of v-bind:sync, even though on a submit action in the parent I submit this.form with all of the emitted values from the child.

Code example Parent:

<ParentComponent>

  <ChildComponent v-bind:sync="form"/>

  {{form}} <--- this doesn't update after child component emits

   <button @click="submit"> submit actions here have access to updated this.form... </button>
</ParentComponent>

...

data() {
  return {
      form: { ...some object keys}
}

Answer 1

You can use deep in watcher to watch object properties change.

Something like

  watch: {
    form: {
      handler() {
        console.log('form change')
      },
      deep: true
    }
  },

As in document

To also detect nested value changes inside Objects, you need to pass in deep: true in the options argument. Note that you don't need to do so to listen for Array mutations.

I created a demo here