使用 Lodash 和 Vuejs 时计算属性不更新

Question

我正在处理的当前项目广泛使用 vuejs，并且我正在尝试利用 Lodash 访问一些基本的数组辅助函数。在一个简单的“喜欢”样式按钮上，我在 vue 模板中有以下内容：

<button class="btn btn-xs" v-bind:class="appreciated" v-on:click="toggleAppreciate()"><i class="fa fa-heart"></i> Appreciate</button>

计算的属性如下所示：

appreciated: function()
{
    return _.indexOf(this.global.userAppreciates, this.entity_id) > -1 ? 'btn-primary' : 'btn-default'
}

单击按钮会发送一个简单的 ajax 请求，服务器会以“已添加”或“已删除”的切换状态进行响应。我正在使用以下代码对“欣赏”存储进行变异：

if (response.data.type === 'added')
{
    return this.global.userAppreciates.push(this.entity_id)
}

return _.pull(this.global.userAppreciates, this.entity_id)

使用纯 javascript 添加的方法可以正常工作。查看 vuetools 显示 userAppreciates 中的元素数量已更新，并且按钮确实更改了状态。但是 - 使用 Lodash 的 _.pull 方法从数组中删除元素不会切换计算的属性状态，即使该元素已从存储中删除。但是，如果我使用纯 JavaScript 并执行以下操作：

let index = this.global.userAppreciates.indexOf(this.entity_id)
this.global.userAppreciates.splice(index, 1)

商店也更新了 - 但是计算属性确实改变了状态并且按钮类改变了。

Lodash 处理这些方法的方式是否特别导致 Vuejs 不接受属性更改？任何澄清将不胜感激。

Answer 1

所有与数组相关的更改可能不是被动的。 Docs 列出以下响应式文档：

• 推()
• pop()
• shift()
• unshift()
• 拼接()
• 排序()
• 反向（）

我会建议使用上述方法并使用上述方法实现_.pull，它应该调用compluted。