Question

我有一个Vue的一般性问题，我不知道。我有3个组件，一个父组件（选择窗口小部件），一个子组件（复选框列表）和多个子孙组件（复选框）。父级具有一组复选框对象，每个复选框对象具有id，label和checked属性。数组通过props传递到子组件中。子组件在数组上循环，将id，label和checked绑定到每个props组件的checkbox。单击复选框后，孙子（checkbox）会发出一个带有id的事件以及该复选框是否被选中。子级（复选框列表）发出相同的事件，将其沿链向上传递给父级（选择小部件）。父级在复选框数组中找到相应的复选框对象，并更改checked的值。

这一切都正常工作，但是，该复选框从不检查，因此从父级通过子级传递到孙子级组件中的数据不会注册更改。如果我尝试检查几个复选框，则什么也不会发生，尽管当我使复选框列表重新呈现时，这些复选框也被选中。谁能帮我弄清楚我所缺少的东西吗？

我用于更新父组件中复选框的代码：

onChange: function( selection ) {

    var targetCheckbox = this.checkboxes.find( function( checkbox ) {
        return checkbox.id === selection.id;
    });

    var targetCheckboxIndex = this.checkboxes.indexOf( targetCheckbox );

    var updatedCheckbox = Object.assign( {}, targetCheckbox, selection );

    this.$set( this.checkboxes, targetCheckboxIndex, updatedCheckbox );
}

其中的选择可能类似于：

{ id: "12", checked: true }

，复选框数组可能类似于：

[
    { label: 'Business Operations', id: '1', checked: false },
    { label: 'Business Ventures', id: '2', checked: false },
    { label: 'Customer-Centric Strategies', id: '3', checked: false }
]

作为道具传递的对象数组，不更新子组件

0 个答案: