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; 
     }); 
    });