[Vuejs]-Vuejs – v-bind.sync on resursive components (hierarchical list)

by

0👍

✅

Figured out how to do it after I broke the code down from the whole 2000 line code to a separate ‘trial-n-error’ code of 20 lines and then things became simple and clear.

Menu.vue

A few changes in the parent component in the HierarchicalCheckboxList declaration:
Note the sync property

<HierarchicalCheckboxList
   v-for="child in children"
   :key="child.id"
   :u.sync="link.value"
   v-bind="child">
</HierarchicalCheckboxList>

HierarchicalCheckboxList.vue

Change the same line of code in the child component (as its recursive)

   <HierarchicalCheckboxList
     v-for="child in children"
     :key="child.id"
     :u.sync="child.value"
     v-bind="child">
   </HierarchicalCheckboxList>

And in the computed set property, emit as below:

   this.$emit('update:u', this.localValue)

That’s it – parent n children components now stay in snyc.

Leave a comment