CODEWITHSUNDEEP
javascriptvuejs2vue.js
dev02
dev02

Reputation: 1856

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

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:

Thanks for the help

Upvotes: 1

Views: 809

Answers (2)

Amresh Venugopal
Amresh Venugopal

Reputation: 9549

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

Upvotes: 2

Jonatas Walker
Jonatas Walker

Reputation: 14150

It looks like you'll have to watch it:

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

Upvotes: 1

Related Questions