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

Question

我目前正在从事的一个项目广泛使用 vuejs，我正在尝试利用 Lodash 来访问一些基本的数组辅助函数。在一个简单的 "like" 样式按钮上，我在 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 请求，服务器会以 "added" 或 "removed" 的切换状态进行响应。我正在使用以下代码来改变 "appreciates":

的存储

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)

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

Lodash 处理这些方法的方式是否有什么特别之处导致 Vuejs 无法接受属性更改？如有任何澄清，我们将不胜感激。

Answer 1

所有与阵列相关的更改都可能不是反应性的。 Docs 列出以下反应性文档：

推送()
弹出（）
移位()
取消移位()
拼接()
排序()
反转()

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

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

Computed properties not updating when using Lodash and Vuejs

javascript

vue.js

vuejs2