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

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

只要您这样做：

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()时已经修改了角色，并且只是将相同的数组分配给属性，方法是：目前正在这样做。

Answer 2

因此，使其始终如一地工作的解决方案是将role属性与用户分开，就像这样：

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

然后只需像通常那样更新事件处理程序方法的role属性。无需使用.$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的许多问题，因此最好避免这样做

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

2 个答案: