javascript - Vue 在第三次更新属性后不会重新渲染组件

Question

所以我有以下代码可以为用户分配或删除现有“Angular 色”:

    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>

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

console.logs 显示属性本身已正确更新，但 View 未更新。

Answer 1

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

无论何时:

让 Angular 色 = this.user.roles

您正在创建对该数组的引用，因此当您接下来执行以下操作时:

roles.push( Angular 色)

你实际上只是在做

this.user.roles.push( Angular 色)

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

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

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

或者您将为用户创建一个未定义的属性，并为其分配 Angular 色。

我不太清楚你为什么要使用 this.$set，因为你在 push() 时已经修改了 Angular 色，它只是分配以您当前的方式将相同的数组返回到属性。