Question

我具有以下computed属性：

new Vue({
  el: '#app',
  data() {
    return {
      search : '',
      users : [{name : "John Doe", email : "xerox@hotmail.us"}, {name : "Jane Doe"}],
    }
  },
  computed : {
    filteredUsers() {
      if (!this.search) return this.users

      var find =  function(object, search) {
        for (var property in object) {
          if (object.hasOwnProperty(property)) {
            if (typeof object[property] == "object"){
              find(object[property]);
            } else if (object[property].includes !== undefined){
              if (object[property].includes(search)) return true;
            }
          }
        }
        return false;
      }

      return this.users.filter(user => {
        return find(user, this.search)
      })
    }
  }
})

如何通过他们的name订购这些东西？

我现在在computed属性中进行了一些过滤，但是在我没有这样做之前，只是使用此函数进行了排序：

orderedList() {
   return _.orderBy(this.users, 'name')
},

我如何结合这两个函数或将orderBy部分添加到filteredUsers函数中？

Answer 1

@boussadjira的答案很好，但是如果您真的不想要额外的功能，只需使用以下内容作为filteredUsers()的返回值

return _.orderBy(
    this.users.filter(user => find(user, this.search)),
    'name'
);

（以及类似的search为空时的短路返回）

Answer 2

使用linq js库。

 computed: {
    filteredUsers {
      return Enumerable.From(this.users).OrderBy(x => x.name).ToArray();
    }
 }

Vue过滤后的列表还可以排序吗？

2 个答案: