Vue：选中/取消选中祖父母或父母时选中/取消选中复选框

Question

所以当我选中/取消选中祖父母或父母时，我会尝试选中/取消选中一个复选框：

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

然而，它在这里无法正常工作：

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

我想要实现的目标是：

• 当选中/取消选中祖父时，它应影响直接子女，例如父母和子女
• 选中/取消选中父级时，它应仅影响子级

感谢您的帮助

Answer 1

您的代码无法按照您的期望工作，因为您的父级有v-model，因此您的:checked属性绑定没有效果。

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

Answer 2

看起来你必须要看它：

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