所以我有以下代码可以为用户分配或删除现有“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 未更新。
最佳答案
这可能不是最终解决方案,但我发现有两个问题可能是根本原因。
无论何时:
让 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 色,它只是分配以您当前的方式将相同的数组返回到属性。
关于javascript - Vue 在第三次更新属性后不会重新渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56997015/