[Vuejs]-Reactive value not updating based on dependent value

0👍

The "All" checkbox has v-model="inputPermissions.all" so there is only two way binding between the input and this one property. You need to create the side-effect of adding/removing all permissions based on the all value changing. There are multiple ways to do it, but one way is with a watcher.

When inputPermissions.all is true, add all permission names to inputPermissions.permissions. When it becomes false, set an empty array.

watch(
  () => inputPermissions.all,
  isChecked => {
    if (isChecked) {
      inputPermissions.permissions = permissions.value.map(v => v.name)
    } else {
      inputPermissions.permissions = []
    }
  }
)

Vue Playground example

Leave a comment