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

Question

我正在开发的当前项目广泛使用vuejs，我试图利用Lodash来访问一些基本的数组助手函数。在一个简单的＆＃34;喜欢＆＃34;样式按钮我在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请求，服务器将以＆＃34;添加＆＃34;的切换状态进行响应。或＆＃34;删除＆＃34;。我使用以下代码然后改变商店＆＃34;赞赏＆＃34;：

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（）方法
• 移（）
• 的unshift（）
• 剪接（）
• 排序（）
• 反向（）

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