javascript - 视觉 : Check/uncheck checkbox when Grandparent or parent is checked/unchecked

Question

所以当祖 parent 或 parent 被选中/未选中时，我试图选中/取消选中复选框:

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

但是它不起作用，如下所示:

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

我想要实现的是:

• 当祖 parent 被勾选/取消勾选时，它应该会影响直接的 child ，例如 parent 和 child
• 当 parent 被选中/取消选中时，它应该只影响 child

感谢帮助

Answer 1

您的代码没有按照您的预期工作，因为您在父级上有一个 v-model，所以您的 :checked 属性绑定(bind)没有效果。

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
      }
    }
  }
})

工作 bin