Vue.js 数据对象不适用于某些 lodash 函数？

Question

我正在做一个小商店模式，如docs所示。

这是我的商店对象：

import Vue from 'vue';
import _ from 'lodash';

class EmployeeService {

  constructor() {
    this.employees = null;
    this.url = 'http://url';
  }

  all() {
    if (this.employees === null) {
      return Vue.http.get(this.url)
        .then(response => (this.employees = response.data.data));
    }

    return new Promise(resolve => resolve(this.employees));
  }

  find(id) {
    const employee = _.find(this.employees, { id });

     if (_.isUndefined(employee)) {
       return Vue.http.get(`${this.url}/${id}`)
         .then(response => response.data);
     }

    return new Promise(resolve => resolve(employee));
  }

}

export default new EmployeeService();

问题出在find(id) 方法中，每当我使用lodash 函数_.find() 时，它总是 返回undefined，即使对象确实存在。但是当我使用 vanilla js 时，像这样：

const employee = this.employees.flter(emp => emp.id == id)[0];

找到对象没有问题。

我想知道为什么会发生这种情况，并确定这是错误还是预期行为。

Answer 1

Vue.js 没有问题。但它在您的_.find 中。正如lodash docs _find 所说：

遍历集合的元素，返回第一个元素谓词返回truthy for。

在您的代码_.find(this.employees, { id }); 中，{ id } 不会返回真实值。对于谓词参数，您应该使用

function(o) {
    return o.id == id;
}

或简写：{'id': id}。