Vue.js重用过滤

Question

我做了这2个过滤器：

过滤器1个

Vue.filter('role',function(value,role) 
     { 
      if(!role || 0 === role.length) 
      { 
       return value; 
      } 
      return value.filter(function(item) { 
       return item.role.RoleName == role 
      }); 
     }); 

过滤器2

Vue.filter('company',function(value,company) 
     { 
      if(!company || 0 === company.length) 
      { 
       return value; 
      } 
      return value.filter(function(item) { 
       return item.department.company.CompanyName == role 
      }); 
     }); 

现在我想将它们结合起来。就像这样：

组合过滤

Vue.filter('employeefilter',function(value,employeeinfo,filteron) 
     { 
      if(!employeeinfo || 0 === employeeinfo.length) 
      { 
       return value; 
      } 
      return value.filter(function(item) { 
       return item.filteron == employeeinfo 
      }); 
     }); 

我把它传递给组合过滤器：

v-for="employee in list | employeefilter selectedrole 'role.RoleName' 

但不工作，我怎么能解决这个问题^

编辑

我现在通过它：

v-for="employee in list | employeefilter selectedrole 'item.role.RoleName'| employeefilter selectedcompany item.department.company.CompanyId" 

错误：

Uncaught TypeError: Cannot read property 'replace' of undefined 

Answer 1

相关：Using variable keys to access values in JavaScript objects

从这个问题的答案：

您可以通过点符号或者括号记号访问对象属性。

var x = {'test': 'hi'}; 
alert(x.test); // alerts hi 
alert(x['test']); // alerts hi 

当你有一个动态值，你必须使用后者：

var property = 'test'; 
alert(x.property); // looks for x.property, undefined if it doesn't exist 
alert(x[property]); // looks for x['test'], alerts hi 

所以你需要做的：

return value.filter(function(item) { 
    return item[filteron] == employeeinfo 
}); 

编辑，实际上是不会因为你还需要解析filteron字符串（item['role.RoleName']不会工作，item['role']['RoleName']是你想要的。查看这个答案的功能，将允许你访问一个ob的深层属性JECT使用字符串：Accessing nested JavaScript objects with string key

最终代码：

Object.byString = function(o, s) { 
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties 
    s = s.replace(/^\./, '');   // strip a leading dot 
    var a = s.split('.'); 
    for (var i = 0, n = a.length; i < n; ++i) { 
     var k = a[i]; 
     if (k in o) { 
      o = o[k]; 
     } else { 
      return; 
     } 
    } 
    return o; 
} 

Vue.filter('employeefilter',function(value,employeeinfo,filteron) 
    { 
     if(!employeeinfo || 0 === employeeinfo.length) 
     { 
      return value; 
     } 
     return value.filter(function(item) { 
      return Object.byString(value, filteron) == employeeinfo; 
     }); 
    });