Vue在第三次更新属性后不会重新呈现组件

Question

因此，我有以下代码，可以为用户分配或删除现有的“角色”：

    onAddRole(role) {
        let roles = this.user.roles
        roles.push(role)

        this.$set(this.user, roles)

        console.log(this.user.roles)

        this.success.role_update = true
    },

    onRoleDelete(selected_role) {
        let i = this.user.roles.map(role => role.id).indexOf(selected_role.id)

        if (i !== -1) {
            let roles = this.user.roles

            roles.splice(i, 1)

            this.$set(this.user, roles)

            console.log(this.user.roles)

            this.success.role_update = true
        }
    }

下面是我的组件数据属性：

data: function() {
    return {
        user: null,
        success: {
            permission: null,
            invalidation: null,
            fetch: null,
            save: null,
            role_update: null
        },
        loading: false
    }
},

下面是相关html的一个片段：

    <b-row>
        <b-col md="6">
            <b-row v-if="user">
                <b-col md="12">
                    <user-roles
                        :user="user"
                        @add_role="onAddRole"
                        @set_role="onRoleSet"
                        @role_failure="roleFail"
                        @role_delete="onRoleDelete"
                    />
                </b-col>
            </b-row>
            <loading v-if="loading" />
        </b-col>
    </b-row>

基本上，如果我添加一次或两次角色，这段代码就能正常工作。但是，在我第三次删除或添加用户角色后，Vue停止重新呈现组件。你知道为什么会发生这种情况吗？

console.logs显示属性本身已正确更新，但视图不更新。

Answer 1

因此，让它一致工作的解决方案是将roles属性与用户分开，如下所示：

data: function() {
    return {
        user: null,
        roles: null,
        success: {
            permission: null,
            invalidation: null,
            fetch: null,
            save: null,
            role_update: null
        },
        loading: false
    }
},

然后，只需像往常一样更新事件处理程序方法的roles属性。不需要使用.$set

    onRoleSet({ role, i }) {
        this.roles.splice(i, 1, role)

        this.success.role_update = true
    },

    onAddRole(role) {
        this.roles.push(role)

        this.success.role_update = true
    },

    onRoleDelete(selected_role) {
        let i = this.roles.map(role => role.id).indexOf(selected_role.id)

        if (i !== -1) {
            this.roles.splice(i, 1)

            this.success.role_update = true
        }
    }

到目前为止，这对我来说是一致的，并且组件按照它应该的方式进行了更新。

在组件的data对象中使用嵌套属性似乎会给我的Vue带来很多问题，所以最好避免这样做

Answer 2

这可能不是最终的解决方案，但我认为有两个问题可能是根本原因。

无论何时，请执行以下操作：

let roles = this.user.roles

您正在创建对该数组的引用，因此当您下一次执行此操作时：

roles.push(role)

实际上，你实际上只是在做

this.user.roles.push(role)

所以实际上没有太多的理由去分配let roles变量。

其次，this.$set需要属性的名称。所以它应该是

this.$set(this.user, 'roles', roles)

否则，您将在分配了roles的用户上创建一个未定义的属性。

我不太确定你为什么要使用this.$set，因为当你使用push()的时候，你已经修改了角色，它只是将相同的数组分配给属性，就像你现在做的那样。