Vue: Check/uncheck checkbox when Grandparent or parent is checked/unchecked

Question

So I am trying to check/uncheck a checkbox when grandparent or parent is checked/unchecked:

new Vue({
  el: '.app',
  data: {
    grand_parent: false,
    parent: false
  }
})

However it's not working as can be seen here:

http://jsbin.com/yabewemimo/edit?html,js,output

What I am trying to acheive is:

• When grand-parent is checked/unchecked, it should affect direct children eg both parent and child
• When parent is checked/unchecked, it should affect child only

Thanks for the help

Answer 1

Your code is not working as per your expectations as you have a v-model on your parent, so your :checked property binding is not having an effect.

new Vue({
  el: '.app',
  data: {
    grand_parent: false,
    parent_proxy: false // Because it will cause a stack overflow if
  },                    // I reference this.parent in its own computed
  computed: {
    parent: {
      get () {
        return (this.grand_parent)
          ? true 
          : this.parent_proxy
      },
      set (val) {
        this.parent_proxy = val
      }
    }
  }
})

the working bin

Answer 2

It looks like you'll have to watch it:

  watch: {
    grand_parent: function (val) {
      if (val) this.parent = true;
    }
  }